Treehouse: Grow your CSS skills. Land your dream job.

Target a class inside ID

  • # February 25, 2011 at 1:52 pm

    I’m trying to remove the numbers from an ol with class: commentlist but #main-content ol li keeps overriding. I set list type to none with ul, ol so my navigation will show up correctly and created style for ol and ul with ID:main-content so I can have lists in my post.

    On pages with posts in wordpress the comments are an ol with a class:comment inside of the #main-content ID and display with the numbers of an ol.

    I don’t understand why #main-content .commentlist ol li won’t work

    Firebug says #main-content ol li is applied.

    ul, ol {
    display: list-item;
    list-style-position: inside;
    list-style-type: none; }

    #main-content .commentlist ol li {
    display: list-item;
    list-style-type: none; }

    #main-content ul li {
    display: list-item;
    list-style-position: inside;
    list-style-type: square;}

    #main-content ol li {
    display: list-item;
    list-style-position: inside;
    list-style-type: decimal; }

    #main-content ul, ol {
    padding-bottom: 16px; }

    #main-content {
    float: right;
    width: 550px;
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 20px; }

    Thank you.

    # February 25, 2011 at 2:02 pm

    If the ol has the class of commentlist then you’re targeting it incorrectly

    #main-content .commentlist ol li { }

    should be

    #main-content ol.commentlist li { }


    #main-content .commentlist li

    without the ol. Also, its not necessary to declare the display type of your lists (unless you’ve changed them a reset, which is yet another reason I don’t like resets). And you’ve already declared all lists to have inside list-style-position, there’s no reason to duplicate it.

    # February 25, 2011 at 2:17 pm

    Worked great! Thank you.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.