Forums

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
    Posts
  • #40399
    realph
    Participant

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

    #112335
    AntonNiklasson
    Participant

    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.

    #112343
    Kitty Giraudel
    Participant

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

    #112695
    realph
    Participant

    @AntonNiklasson That is genius! Thanks a lot bud!

    #112696
    GMB
    Participant

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