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

[Andrew Hankinson]

I think you might want just foo:nth-child(even)

foo.bar only selects element 'foo' if they have the class 'bar' on them. To give a more concrete example:

<ul>
 <li class="list-item">Item 1</li>
 <li class="another-item">Item 2</li>
 <li class="another-item">Item 3</li>
 <li class="list-item">Item 4</li>
</ul>

In this case, li:nth-child(even) will highlight rows 2 & 4, since they are the even descendants of their parent item, <ul>.

I haven't tested it, but li.list-item:nth-child(even) should only select row 4, since it is an even child of the parent with the class 'list-item.'

If you posted a snippet of your actual code, I might be able to help a bit more.

-Andrew

On 2010-12-01, at 10:05 AM, Thomas Dowling wrote:

> Greetings--
> 
> Attempting to do my six impossible things before breakfast, I ran up
> against a CSS3 problem.  Or more likely, a dissonance between how I think
> things should work and reality.
> 
> (More concise and less rambling example of the problem below at
> <http://www.ohiolink.edu/~tdowling/even-test.html>).
> 
> 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.
> 
> Am I simply trying to do something that can't be done?  FWIW, the
> underlying HTML markup is generated by a third-party app and I can't
> control the page in question.
> 
> 
> 
> -- 
> Thomas Dowling
> tdowling at ohiolink.edu
> 
> 
> 
> _______________________________________________
> Web4lib mailing list
> Web4lib at webjunction.org
> http://lists.webjunction.org/web4lib/
>