■ :first-child
■ :last-child
■ :only-child
■ :nth-child()
■ :nth-last-child():first-child and :last-child
Asyou’veprobablyguessedfromthenames,the:first-childand:last-child
pseudo-classesmakeitpossibletoselectelementsthatarethefirstchildorlast
childofanode(element).Aswithotherpseudo-classes,:first-childand:last-
childhavethefewestsideeffectswhenqualifiedbyasimpleselector.Let’stakealookattheHTMLandCSSbelow:<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>:first-child and :last-child</title>
<style type="text/css">
body {
font: 16px / 1.5 sans-serif;
}
:first-child {
color: #e91e63;
}
:last-child {
color: #4caf50;
}
</style>
</head>
<body>
<h2>List of fruits</h2>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Blueberries</li>
<li>Oranges</li>
<li>Strawberries</li>46 CSS Master