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

[tirengarfio]

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?

[Paulie_D]

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/

[Author]

Posts