This site is designed for accessibility. Content is obtainable and functional to any browser or Internet device. This site's full visual experience is available in a graphical browser that supports web standards. Please consider upgrading your web browser.

Targeting selectors to accomplish precise tasks (part 2)

Assume the following markup, which cannot be changed in any way:

<body>
<h1>Hel<strong>lo</strong> there!</h1>
<p>Welcome to my Web site. I'm <strong>so</strong> glad
you're here! On this site you can find:
</p>
<ul>
<li><a href="mepics.html">Pictures of me</a>...
<ul>
<li>...with <a href="friendpics.html">friends</a></li>
<li>...with <a href="fampics.html">family</a></li>
<li>...with <a href="beerpics.html">beer</a></li>
</ul>
</li>
<li><a href="fluffpics.html">Pictures of my cat Fluffy</a></li>
<li><a href="poetry.html">My poetry</a>...
<ul>
<li>...written to <a href="seriouspoetry.html">be serious</a></li>
<li>...written to <a href="funnypoetry.html">be funny</a></li>
</ul>
</li>
<li><a href="favlinks.html">My <em>favorite</em> Web sites</a></li>
</ul>
<div class="rant">
Want to hear something annoying?
<p>
I mean, <strong>really</strong> annoying?
</p>
Well then, here goes.
<p>
The other day someone wrote telling my site was:
</p>
<ul>
<li>lame</li>
<li>stupid</li>
<li>narcissistic</li>
<li><em>really</em> lame</li>
</ul>
<p>
I <strong>hate</strong> that! Why do people do things like that?
After all, if you don't like the Web site, don't come here. I'm proud of
<a href="fluffpics.html">my cat</a> and there's nothing wrong with
naming a mynx Fluffy anyway.
</p>
<p>
So <em>there</em>.
</p>
</div>
<p>
Sorry about that little bit of ranting. I promise to be more cheerful in the
future. If you want, e-mail me at <a href="mailto:me@my.web.site">me@my.web.site</a>,
but <em>not</em> if you're going to complain.
</p>
<p>Have a nice day!</p>
<div class="footer">
All content copyright <a href="mepics.html">me</a>, on the date I
wrote it.
</div>
</body>

Example a:
To uppercase the word "so" in the first paragraph use:

body > h1 + p > strong {text-transform: uppercase;}

This selects any strong element that is a child of a paragraph that immediately follows (is sibling to) a heading 1 that is a child of a body element.

Example b:
To color green the word "narcissistic."use:

div.rant > p + p + ul > li:first-child + li + li {color: green;}

This selects any list item that immediately follows (is sibling to) a list item that immediately follows (is sibling to) a list item that is a first child that is a child of an unordered list that immediately follows (is sibling to) a paragraph that immediately follows (is sibling to) a paragraph that is a child of a division with a class attribute that contains the word "rant".

Example c:
To make the link "my cat" purple when it's been visited, using a selector that begins with div and that contains a :first-child somewhere within it use:

div.rant > :first-child + * + * + * > a:visited {color: purple;}

This selects any "a" element whose target has been visited that is a child of any element that immediately follows (is sibling to) any element that immediately follows (is sibling to) any element that immediately follows (is sibling to) any element that is a first child that is a child of a division with a class attribute that contains the word rant.

Example d:
To boldface the first letter of the paragraphs beginning with "Welcome to" and "The other day" using a single selector use:

* *:first-child + p:first-letter {font-weight : bold;}

This selects the first letter of a paragraph that immediately follows (is sibling to) any element that is a first child that is a descendant of any element.

Example e:
To uppercase the strong elements containing the text "lo" and "really" (but no others) using a single selector. use:

*:first-child > strong:first-child {text-transform: uppercase;}

This selects any strong element that is a first child that is a child of any element that is a first child.