SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling nested lists

    I want to target the ordered list using a child selector ie ol>li {color:red;}. What am I doing wrong? It targets all li elements.


    <div>
    <ul>
    <li>unordered list 1</li>
    <li>unordered list 2
    <ol>
    <li>ordered list</li>
    <li>ordered list 2</li>
    <li>ordered list 3</li>
    </ol>
    </li>
    </ul>
    </div>

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Tinker Air Force Base, Oklahoma, United States
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought maybe there was a minor mistake I was missing, since it seems like everything should work fine. However, I tried it in CodePen just to be sure, and it worked fine. Check your HTML/CSS files for typos.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yes, that should work, unless some other style is overriding it. You could try ul ol > li

  4. #4
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have moved the code to a new page and validated it.

    ol>li works but ul>li does not - all li elements are coloured.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    We need to see your full code to know what's happening here. Make sure to clarify what yu want to see happening.


Bookmarks

Posting Permissions

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