HTML and CSS Reference
In-Depth Information
<h2>Subtitle</h2>
</header>
<section class="guest">
<h1>Guest content</h1>
<div>
<article>
<h1>Guest article</h1>
<footer>Article
au-
thor</footer>
</article>
</div>
<footer>Section footer</footer>
</section>
<footer>Page footer</footer>
</body>
A complex selector might be used to pick out the footer in an article that was the top
guest section on the page, for the purpose of emphasizing the author, or what have you:
header + section.guest article > footer { border:1px solid
red; }
Reading right to left, this would add a red border to a footer that was directly con-
tained in an article that was a descendant of a section that has the class guest set. This
section must be directly adjacent to a header. Since the header should appear at the top
of the page, this would pick out the top section only (if there were multiple sections on
the page). To see this demonstrated, create an exact duplicate of the section in the prior
code block and paste it below the existing one. If you apply the styles, you will see that
only the footer inside the first section's article will have the style applied. To select the
footer in any article, the adjacent sibling combinator ( + ) could be changed to the new
general sibling combinator ( ~ ), which would match any section with the class guest
that was a sibling of the header.
Note Although it is possible to create long chains of selectors and combinators, you
will want to aim to create as concise selectors as possible. Unnecessarily complex se-
lectors can become difficult to comprehend and hard to maintain against changes in the
HTML. However, it is important to know that creating such complex selectors is pos-
sible, for when you do need them!
Search WWH ::




Custom Search