HTML and CSS Reference
In-Depth Information
Figure 13-1. The first heading is converted to uppercase
But the <h3> heading is no longer the first child if you precede it with a skip link like this:
<div id="aside">
<a href="#main">Skip to main content</a>
Adding the link before the <h3> heading prevents h3:first-child from working. If you test first-child_skip.
html, the first heading is no longer in uppercase. However, it's the first element of its type within the <div> , so you
can use h3:first-of-type to select it like this (the code is in first-of-type.html):
h3: first-of-type {
text-transform: uppercase;
If you test first-of-type.html, the first <h3> heading is in uppercase, but the second one is a mixture of
uppercase and lowercase as before (see Figure 13-1 ).
The other pairs of pseudo-classes work the same way. With :last-child , the target must be the last element
inside its parent, whereas with :last-of-type , other elements of a different type can follow. With :only-child ,
no other elements can be nested inside the parent. The :only-of-type pseudo-class targets an element that's the
only one of its kind among other siblings.
There's considerable overlap between these pseudo-classes. sometimes, first, last, and only refer to the
same element. Choosing the right one often requires careful thought. The “of-type” pseudo-classes are more flexible,
but the “child” pseudo-classes give a finer level of control. For example, using :first-child means “apply this
style only if nothing else precedes this element.”
Search WWH ::

Custom Search