Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts

    Proper way to write selector css for multiple unordered lists

    This is a question about your personal opinion.

    Say you have some html with three unordered lists in a container like this

    Code:
    <div class="wrap">
       <ul>
         <li>item one</li>
         <li>item two</li>
       </ul>
    
       <ul>
         <li>item one</li>
         <li>item two</li>
       </ul>
    
       <ul>
         <li>item one</li>
         <li>item two</li>
       </ul>
    </div>
    How do you write the css to target the unordered list's list item selector?

    Here are two examples to help show what I mean

    .wrap ul li {}
    .wrap li {}

    How would you write your css to style the list items and list above?
    Thanks!

  • #2
    New Coder
    Join Date
    May 2009
    Posts
    34
    Thanks
    0
    Thanked 3 Times in 3 Posts
    I think I understand your question. Here's my best answer. I think it's pretty organized.

    Code:
    <style type="text/css">
    
    ul.one { color: #060; }
    ul.one li.a { font-size: 11px; }
    ul.one li.b { font-size: 13px; }
    ul.two { color: #C90; }
    ul.two li.a { font-size: 11px; }
    ul.two li.b { font-size: 13px; }
    ul.three { color: #33F; }
    ul.three li.a { font-size: 11px; }
    ul.three li.b { font-size: 13px; }
    
    </style>
    Code:
    <div id="menus">
       <ul class="one">
         <li class="a">item one</li>
         <li class="b">item two</li>
       </ul>
    
       <ul class="two">
         <li class="a">item one</li>
         <li class="b">item two</li>
       </ul>
    
       <ul class="three">
         <li class="a">item one</li>
         <li class="b">item two</li>
       </ul>
    </div>

  • #3
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    No, it is much simpler. Refer to my original post. I am asking how you would style the html I presented. No extra classes. How would you style the list items. Assume each list is a different list, but has the same style.

    Would you do something like .wrap ul li, .wrap li, or something else?

    Would you do it like ul.wrap li?
    Last edited by stevenmw; 07-26-2013 at 03:55 PM.
    Thanks!

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,772
    Thanks
    23
    Thanked 550 Times in 549 Posts
    With over 450 posts here stevenmw, are you trolling?
    use this
    Code:
    .wrap li {}
    and the <li>s not in the wrap div will not be affected. The other does the same thing, but your fingers will get tired typing all that extra stuff.
    Evolution - The non-random survival of random variants.

  • #5
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    Quote Originally Posted by sunfighter View Post
    With over 450 posts here stevenmw, are you trolling?
    use this
    Code:
    .wrap li {}
    and the <li>s not in the wrap div will not be affected. The other does the same thing, but your fingers will get tired typing all that extra stuff.
    No, I'm not trolling. (I would never do that.) This wasn't a question of me asking how to do it. I was wanting to see if anyone actually did .wrap ul li, or the majority just did .wrap li. I was simply curious over how others did it. If you read above another user handled by putting the ul in front.
    Thanks!

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,772
    Thanks
    23
    Thanked 550 Times in 549 Posts
    Just kidding steve. How do you do it?
    Evolution - The non-random survival of random variants.

  • #7
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    I generally just do .wrap li {}

    I was working on a Wordpress theme for myself, and I imported the WP test data used to test themes, and I noticed that child categories were acting funny. I never use child categories so I had never thought about them before. So out of curiosity I checked it out in Firebug. It turns out that when hard coding a side bar and using the wp_list_ categories function the list's html is set up like this.

    Code:
    <ul>
      <li class="cat-item">item 1</li>
      <li class="cat-item">item 2</li>
        <ul class="children">
           <li class="cat-item">item 2 child</li>
        </ul>
    </ul>
    To me it seems a little redundant to have a second ul for the child cats instead of just giving the li a unique class such as

    Code:
    <li class="cat-item-child">child cat</li>
    After realizing this i put the category widget into my sidebar to se if it did things the same way, and was surprised to see it treated child categories exactly like other list items. Which like above simply looks like.

    Code:
    <li class="cat-item">child cat</li>
    There was no extra unordered list, or even a unique class name.

    Because of the second ul and he fact that WP uses the class name children in other places for completely different things I had to target my css differently, and write some extra stuff which was just an inconvenience. I noticed in some areas how WP had it set up if I used something like .wrap li the style wouldn't take affect, but if I used .wrap ul li it worked fine.

    And all of this got me thinking of how other people handle their list items, and if they found it a bit redundant to need to do something like .wrap ul li.
    Thanks!

  • #8
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ul.wrap li , or ul.wrap > li to avoid nested li's getting the style if I dont want it to

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,277
    Thanks
    28
    Thanked 272 Times in 266 Posts
    Quote Originally Posted by stevenmw View Post
    Here are two examples to help show what I mean

    .wrap ul li {}
    .wrap li {}

    How would you write your css to style the list items and list above?
    It depends. These two selectors are different in that the former has higher specificity and the latter will also select li elements within ol elements.

    As a coding style issue, it also depends. Excessively verbose selectors like .wrap ul li allows a style sheet reader to more easily discern what element a selector applies to, reduces chances of the selector being accidentally overridden, and creates symmetry in certain cases like this:

    Code:
    .wrap ul {}
    .wrap ul li {}
    .wrap ul li ul {}
    .wrap ul li ul li {}
    
    /* versus this */
    .wrap ul {}
    .wrap li {}
    .wrap ul ul {}
    .wrap ul ul li {}
    On the other hand, it makes your code less flexible. Consider this code:

    Code:
    /* only the list items are styled */
    .wrap ul li {}
    If you suddenly decide to use ordered list elements (instead of unordered list elements) and only have styles applying to list items, for example, then you need to rewrite the selector to match when you wouldn't have if you had used the more generic .wrap li selector.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    Regular Coder stevenmw's Avatar
    Join Date
    Jun 2007
    Location
    OK
    Posts
    497
    Thanks
    27
    Thanked 31 Times in 31 Posts
    I do specify when using both ordered lists and unordered lists. In the theme I mentioned above I have a class that contains each of my posts. In this class I will sometimes have both ordered lists and unordered lists so I did specify by doing

    Code:
    .entry-body ol {}
    
    .entry-body ol li {}
    
    .entry-body ul {}
    
    .entry-body ul li{}
    Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •