Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS I want rules not to be used on the list of my footer

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #160911
    tirengarfio
    Participant

    Hi,

    I have two lists in my page. The first one in the #main element, and the second one in the #footer element. Since the #footer element is inside the #main element these are my rules:

    body div#wrap_all div#main div#footer div.widget_nav_menu ul#menu-footer li {
        border-right: 1px solid #D2AB67;
        display: inline-block !important;
        padding: 0 10px;
    }
    /* I dont want this rules below to be applied to the list in the footer */
    body div#wrap_all div#main section.avia_widget_section ul li {
        border-bottom: 1px solid #E0D3CD;
        font-family: "Georgia";
        font-size: 17px;
        font-style: italic;
    }
    

    The problem: the rules of the first list are also applied to the list in the .footer element. What can I do to avoid that?

    #160912
    Paulie_D
    Moderator

    You don’t need to stack all those ID tags in the selector.

    This

    body div#wrap_all div#main div#footer div.widget_nav_menu ul#menu-footer li {
        border-right: 1px solid #D2AB67;
        display: inline-block !important;
        padding: 0 10px;
    }
    

    is the same as this

    #menu-footer li {
        border-right: 1px solid #D2AB67;
        display: inline-block !important;
        padding: 0 10px;
    }
    

    and this

    body div#wrap_all div#main section.avia_widget_section ul li {
        border-bottom: 1px solid #E0D3CD;
        font-family: "Georgia";
        font-size: 17px;
        font-style: italic;
    }
    

    is the same as this

    #main section.avia_widget_section ul li {
        border-bottom: 1px solid #E0D3CD;
        font-family: "Georgia";
        font-size: 17px;
        font-style: italic;
    }
    

    As for your specific issue try this

    #main section.avia_widget_section > ul > li {
        border-bottom: 1px solid #E0D3CD;
        font-family: "Georgia";
        font-size: 17px;
        font-style: italic;
    }
    

    http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.