Menu
I'm having a problem with my links and I can't seem to find why first-child is acting this way.
Instead of modifying the first link inside my unordered list, it modifies them all. The same thing happens when i try using last-child or nth-child.
Could anyone help me figure this out? Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {margin:0;padding:0;font-size:13px;color:white;font-family:arial;}
body {background-color:black;}
#wrapper {margin:0px auto;width:1024px;}
#types {position:relative;top:4px;width:810px;list-style-type:none;}
#types li {display:inline;}
#types a {text-decoration:none;padding:8px;margin:-1px;background-color:#1A1A1A;}
#types a:hover {background-color:#A02723;}
#types a:first-child {background-color:#A02723;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
<ul id="types">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
</ul>
</div>
</body>
</html>
233
a:first-child matches <a> elements that are the first child of their parent. Your <a> elements are in completely different <li>s, so they all are the first children of their parent element.
You should match the <li> elements instead:
#types li:first-child a {background-color:#A02723;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
