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.
Search WWH ::

Custom Search