HTML and CSS Reference
In-Depth Information
that are sole children and found inside hyperlinks, then you just modify the selector
like so (which is illustrated in
Figure 1-24
):
a[href] img:only-child {border: 2px solid black;}
<a href="http://w3.org/"><img src="w3.png" alt="W3C"></a>
<a href="http://w3.org/"><img src="w3.png" alt=""> The W3C</a>
<a href="http://w3.org/"><img src="w3.png" alt=""> <em>The W3C</em></a>
Figure 1-24. Selecting images that are only children inside links
There are two things to remember about
:only-child
. The first is that you
always
apply
it to the element you want to be an only child, not to the parent element, as explained
earlier. And that brings up the second thing to remember, which is that when you
use
:only-child
in a descendant selector, you aren't restricting the elements listed to a
parent-child relationship. To go back to the hyperlinked-image example,
a[href]
img:only-child
matches any image that is an only child and is descended from an
a
element, not is a child of an
a
element. Therefore all three of the images here would be
matched, as shown in
Figure 1-25
.
a[href] img:only-child {border: 5px solid black;}
<a href="http://w3.org/"><img src="w3.png" alt="W3C"></a>
<a href="http://w3.org/"><span><img src="w3.png" alt="W3C"></span></a>
<a href="http://w3.org/">A link to <span>the <img src="w3.png" alt=""> web</span>
site</a>
Figure 1-25. Selecting images that are only children inside links
In each case, the image is the only child element of its parent, and it is also descended
from an
a
element. Thus all three images are matched by the rule shown. If you wanted
to restrict the rule so that it matched images that were the only children of
a
elements,
then you'd simply add the child combinator to yield
a[href] > img:only-child
. With
that change, only the first of the three images shown in
Figure 1-25
would be matched.
