Specifying css selectors

Question

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.

Arun P Johny · Accepted Answer · 2014-07-18 03:27:43Z

4

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

answered Jul 18, 2014 at 3:27

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

royhowie Over a year ago

An id, e.g., #myFooter, might be more appropriate than a class, since it applies to only one footer.

Collectives™ on Stack Overflow

Specifying css selectors

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related