- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Is there a way in CSS to style an unordered list, and have an alternate style that takes effect when there are 4 or more list items?
Or is it easier/better practice to use jQuery’s addClass for something like this?
Something along the lines of:
if ($(‘nav ul li’).length > 4) {
$(“nav ul”).addClass(“grid”);
}
This might be helpful: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
Otherwise use that jQuery you have there. One thing that might make it easier is to style the ul as it would look with 4 or more li’s in it as default. Then override some css when there’s 3 li’s or less. That way I think you’ll end up with fewer LOC.
If you have to support old browsers, use jQuery (or whatever JavaScript library). Else, use CSS selectors to count number of siblings.
@AntonNiklasson That is genius! Thanks a lot bud!
@AntonNiklasson — yes, that is PDN (pretty darn neat). I’ve been coming across more and more references to Lea Verou’s work of late. I’m going to have to explore it a bit more thoroughly. Many interesting ideas/solutions to similar such problems.