Css navigation and targeting items

HTML & CSS
1

Hi Guys

i have created a very simple text based css navigation which currently looks like this

this is my css

#navigation {
	clear:both;
	font-size: 1.2em;
	font-weight: bold;
	color: #999999;
	text-transform:uppercase;
}

#navigation ul {
	padding-top: 12px;
	width: 980px;
	list-style: none;
}

#navigation ul li {
	padding: 3px 23px 3px 22px;
	border-right: 1px solid #999999;
	float: left;
}

#navigation ul li.last {
	border-right: none
}


#navigation a {
	color: #999999;
	text-decoration: none;
}

and this is my html

<div id="navigation"><ul>
<li><a href="#">Home</a></li>
<li id="register"><a href="#">Red</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
<li><a href="#">link5</a></li>
<li><a href="#">link6</a></li>
<li><a href="#">link7</a></li>
<li><a href="#">link8</a></li>
<li class="last"><a href="#">link9</a></li>
</ul></div>

i have already taregted the last item so that it does not have a right broder, this works but im not sure if the method used is the correct way to do it?

also i would like to target the second list item “Red” so that the link colour is red, how would i do this in the correct manner?

thanks :slight_smile:

2

Nothing wrong with using class=“last” like that – in theory you could use CSS3 selectors to target it, but that doesn’t work in IE8/lower so we’re still a ways off on that being real-world deployable.

I’d be more concerned with the DIV around the UL for nothing. PERFECTLY good block-level container all on it’s own; you aren’t applying anything to the DIV you couldn’t just declare on the UL.

3

hi, thanks for that i did as you suggested and removed that div and applied the styling to the ul

is this the correct method to target the second list item “red”

#navigation .register a{
color: #F00;
}

it seems to work just not sure if its the correct method to use?

4

i don’t like to use ID selector. i will add a class like .red to the second li’s childnode a.
And there is no need to define #navigation { color: #F00; }

5

If you don’t want to use class=“last” then the trick I use is to set overflow:hidden on the ul , apply a left border instead and then just shift the list 1px to the left and the odd border is hidden.

You have an id of register in the html but in your above code you have used a dot(.) instead of a hash(#).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#navigation {
	clear:both;
	font-size: 1.2em;
	font-weight: bold;
	color: #999999;
	text-transform:uppercase;
	padding-top: 12px;
	width: 980px;
	list-style: none;
	overflow:hidden;
	margin:0;
	padding:0;
}
ul#navigation li {
	padding: 3px 23px 3px 22px;
	border-left: 1px solid #999999;
	float: left;
	margin-left:-1px;
}
#navigation a {
	color: #999999;
	text-decoration: none;
}
#register a{color: #F00;}
</style>
</head>

<body>
<ul id="navigation">
		<li><a href="#">Home</a></li>
		<li id="register"><a href="#">Red</a></li>
		<li><a href="#">link3</a></li>
		<li><a href="#">link4</a></li>
		<li><a href="#">link5</a></li>
		<li><a href="#">link6</a></li>
		<li><a href="#">link7</a></li>
		<li><a href="#">link8</a></li>
		<li><a href="#">link9</a></li>
</ul>
</body>
</html>

Remember also to cancel out the default padding and margins on uls.