Esoteric selectors

These selectors are part of the CSS specifications, but not as widely used
because of support issues with some browsers. Over time, however, the use
of esoteric selectors will probably increase. I encourage you to check recent
browser-support charts to determine which browsers support these selectors.
Several helpful browser-support charts are listed in the Resources section.
Other pseudo-classes
 :first-child targets any element that is the first child of its parent element.
<ol>
<li>this list item is a first-child.</li>
<li>this list item is not.</li>
</ol>
li:first-child {font-variant: italic;}
 :lang(n) targets any element on the basis of the language that has been set
for it.
<cite lang="fr">Faites les bon temps rouler!</cite>
:lang(fr) { font-face: Gigi, sans-serif;}


 :first-letter targets the first line of text within an element.
<h1>Solving your first case</h1>
<p>Make sure you act cool, calm, and collected. Remember
➥ everything you have learned about deduction, and take your
➥ toolkit.</p>
h1 + p:first-letter {font-size: 110%;}
 :first-line targets the first letter of a line of text within an element.
<p>Once you arrive at the scene of the crime, you have to start
➥ gathering the evidence. Hopefully, they won’t have tidied up
➥ before you got there!</p>
p:first-line {font-weight: bold;}
 :before specifies content to be inserted before a given element.
#breadcrumbnav:before {content: “Current page:";}
 :after specifies content to be inserted after a given element.
<p>the crime took place at <span class="time">13:00</span>.</p>
.time:after {content: "hours";}