Grow your CSS skills. Land your dream job.

Using CSS to Style UL with 4 or more List Items

  • # October 20, 2012 at 11:09 pm

    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”);
    }

    # October 21, 2012 at 5:49 am

    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.

    # October 21, 2012 at 1:20 pm

    If you have to support old browsers, use jQuery (or whatever JavaScript library). Else, use CSS selectors to count number of siblings.

    # October 26, 2012 at 11:19 am

    @AntonNiklasson That is genius! Thanks a lot bud!

    GMB
    # October 26, 2012 at 11:34 am

    @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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".