WEB STANDARDS CREATIVITY

168
Adjacent selectors in an imperfect world
Using an adjacent selector is my logical next step:
p {
margin: 0;
}
p+p {
text-indent: 2.1em;
}
The p+p adjacent selector will address only a paragraph that is immediately preceded by another paragraph. In theory, this
does exactly what I want it to, since the first paragraph is obviously not preceded by another paragraph, and will therefore
ignore this rule. In a perfect world, this would have completed the task at hand, and I’d be at the bar by now. Sadly, though,
Internet Explorer 6 does not support adjacent selectors, and now it renders all of my paragraphs as a single nebulous blob.
When faced with a similar problem while I was putting together my personal site, I solved it like so:
p {
text-indent: 2.1;
margin: 0;
}
h2+p {
text-indent: 0;
}
The content area in question began with two headlines: a title (h1) and a date stamp (h2), followed by the first paragraph (p).
The h2+p adjacent sibling selector achieved the desired effect in compliant browsers, and an indented first paragraph in
Internet Explorer, a necessary compromise in a situation where the markup could not be altered.
This is not a viable option in my current situation, since #main’s first paragraph is not preceded by another element, but
there is also nothing stopping me from altering the markup ever so slightly. I need only to give the first paragraph a class of
first:
First paragraph copy goes here.
And then add one more rule to my original CSS:
p {
text-indent: 2.1em;
}
.first {
text-indent: 0;
}
Mission accomplished (Figure 7-12)!