CODEWITHSUNDEEP
css
IAmAlfred
IAmAlfred

Reputation: 65

Specifying css selectors

I have a footer, which has a horizontal menu.

CSS

footer {
    height:99px;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 20px;
    padding-top:26px;
}
li {
    float:right;
    width:8%;
}

I want to make it so that when I make other menus, the css for the footer menu won't affect it. What would be an effective method for this? The html is just a basic <footer> tag.

Upvotes: 0

Views: 51

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

In this case, you can use descendant relationship, where you say apply the style to ul elements which comes inside a footer element.

footer {
    height:99px;
}
footer ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 20px;
    padding-top:26px;
}
footer ul li {
    float:right;
    width:8%;
}

If you want to be more specific(if you might have multiple footer elements in the page) you can assign a class to the footer like myfooter then use the class selector also like

footer.myfooter {
}
footer.myfooter ul {
}
footer.myfooter ul li {
}

Have a look st the different CSS selctors

Upvotes: 4

Related Questions