The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Using CSS to Style UL with 4 or more List Items

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #40399

    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:

    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.

    Kitty Giraudel

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.