HTML and CSS Reference
In-Depth Information
Making our CSS more specific…
Okay, let's use the fact that we have a
<nav>
element in the HTML and make the
selectors more specific. That way, we ensure that future changes to the HTML
(such as adding a innocent
<ul>
element to somewhere else in the page down the
road), don't result in any unexpected styling. Here's how we do that…but notice that
we do have to make a few adjustments to the margins of the
<nav>
element so it
behaves correctly.
We've a
dded a new rule for the <nav> el
ement, and moved the
propert
ies for setting the background c
olor and margin into this rule,
so every
thing in the <nav> element gets
styled with these properties.
nav {
background-color: #efe5d0;
margin: 10px 10px 0px 10px;
}
nav ul {
margin: 0px;
list-style-type: none;
padding: 5px 0px 5px 0px;
}
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
nav ul li a:link, nav ul li a:visited {
color: #954b4b;
border-bottom: none;
font-weight: bold;
}
nav ul li.selected {
background-color: #c8b99c;
}
Finally, for ALL the
se rules, we've added t
he
selector “nav” in fron
t of them so the rule
s affect
ONLY <ul> elements
that appear within a
<nav>
element. That way, w
e can be sure that if
the
CEO adds a <ul> to
his blog in the future,
it won't
get styled like a navi
gation list!
Ta-da! Look at that navigation!
Get these changes into the CSS and give it a try. Not
bad, huh? And now we can rest assured that any future
<ul>
elements won't be affected by the navigation CSS.
Remember, when possible, add the most specific rule
you can to style your elements.
