Hi -
I have several classes set up in my stylesheet:
.navigation ul{list-style-type: none; text-align: center;}
.navigation li { display: inline; margin-left: 4px; margin-right: 4px;}
.navigation li a{font-size: .9em; font-family: verdana, sans-serif; text-decoration: none; border-top: 2px solid gray; border-right: 2px solid black; border-bottom: 1px solid black; border-left: 1px solid black; padding: 9px 13px 9px 13px; color: white;}
.navigation li a:hover {text-decoration: underline; background-color: #A8320B;}
I would like to add different backgrounds to each list item, so the result would be:
<div class="navigation">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="1">Link #1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="2">Link #2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="3">Link #3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="4">Link #4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="5">Link #5</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="2">Link #6</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="1">Link #7</a></li>
</ul>
</div>
I tried:
.navigation li a.1{background-color: #7FA808;}
but this is not being recognized.
How do I write the CSS coding so that five different background options are available, each named "class=whatever number"?
Or must this be done in the link tag's coding itself?
Thanks,
KDLAYou are looking for the nth-child() pseudo-class (<!-- m --><a class="postlink" href="http://www.geocities.com/glazou_2000/css3-modsel-tests/css3-modsel-55.xml">http://www.geocities.com/glazou_2000/cs ... sel-55.xml</a><!-- m -->) which isn't supported yet. Untill then it's an extra class, style or DOM coding that's required.Thanks for the prompt response!
Gracias, Fang -
KDLA
I have several classes set up in my stylesheet:
.navigation ul{list-style-type: none; text-align: center;}
.navigation li { display: inline; margin-left: 4px; margin-right: 4px;}
.navigation li a{font-size: .9em; font-family: verdana, sans-serif; text-decoration: none; border-top: 2px solid gray; border-right: 2px solid black; border-bottom: 1px solid black; border-left: 1px solid black; padding: 9px 13px 9px 13px; color: white;}
.navigation li a:hover {text-decoration: underline; background-color: #A8320B;}
I would like to add different backgrounds to each list item, so the result would be:
<div class="navigation">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="1">Link #1</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="2">Link #2</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="3">Link #3</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="4">Link #4</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="5">Link #5</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="2">Link #6</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#" class="1">Link #7</a></li>
</ul>
</div>
I tried:
.navigation li a.1{background-color: #7FA808;}
but this is not being recognized.
How do I write the CSS coding so that five different background options are available, each named "class=whatever number"?
Or must this be done in the link tag's coding itself?
Thanks,
KDLAYou are looking for the nth-child() pseudo-class (<!-- m --><a class="postlink" href="http://www.geocities.com/glazou_2000/css3-modsel-tests/css3-modsel-55.xml">http://www.geocities.com/glazou_2000/cs ... sel-55.xml</a><!-- m -->) which isn't supported yet. Untill then it's an extra class, style or DOM coding that's required.Thanks for the prompt response!
Gracias, Fang -
KDLA