[Web4lib] CSS3 selector question - nth-child(even)

[Bob Duncan]

At 10:05 AM 12/1/2010, Thomas Dowling wrote:
>. . .
>I'm trying to display alternate entries in a list with a colored
>background using the CSS3 'foo.bar:nth-child(even)' selector.  My
>expectation was that, whatever else the page had, alternate occurrences of
>'<foo class="bar">' would have the background.
>
>Instead, I get the background on even-numbered <foo>'s *if* they happen to
>be 'class="bar"'.  That's a very different thing if you have to work
>around markup that may throw in other kinds of <foo>'s.


The condition of odd/even-ness is determined at the sibling level, 
and a sibling is a sibling regardless of HTML element and/or class 
attribute value (just as human children from the same two parents are 
siblings regardless of gender or hair color?).  In your list of tasty 
things, the first two animals are odd-numbered siblings, hence the 
style is not applied.  (See 
<http://libcat.lafayette.edu/screens/nthchild.html> for an example 
without classes involved.)

So with foo.bar:nth-child(even), the style declaration(s) will only 
be applied when a foo element with a bar class attribute is an 
even-numbered sibling.

Bob Duncan


~!~!~!~!~!~!~!~!~!~!~!~!~
Robert E. Duncan
Systems Librarian
Editor of IT Communications
Lafayette College
Easton, PA  18042
duncanr at lafayette.edu
http://library.lafayette.edu/