CSS question: Changing styled <LI> buttons

[Ed Jay]

I have a menu setup using the following CSS code:

#nav ul{
margin:auto;
text-align:center;
margin-top:1px;
padding:0px;
display: block;
}
#nav ul li{
display: inline;
}
#nav ul li a{
/* display: block; */
/* float: left; */
margin-right:1px;
margin-left:1px;
margin-top:1px;
padding: 1px;
font:10pt arial,sans-serif;font-weight:normal;
background: #fbebbf;
border:1px solid red;
}
#nav ul li a:link {color:#000000;text-decoration:none;}
#nav ul li a:visited {color:#000000;text-decoration:none;}
#nav ul li a:hover {color:white;text-decoration:none;background:#330099;}
#navu ul li a:active {color:#6666cc;text-decoration:none;}

The menu looks like:

<div id="nav"><ul>
<li><a href="url1">Dest 1</a></li>
<li><a href="url2">Dest 2</a></li>
..
..
etc...
</ul></div>

How can I change the background color of individual buttons? IOW, if I
have seven buttons , but I want two of them to be a different color than
the rest.

 

[David Dorward]

How can I change the background color of individual buttons? IOW, if I
have seven buttons , but I want two of them to be a different color than
the rest.

Classes or ids depending on the reason.

 

[Ed Jay]

Ed Jay wrote:

Classes or ids depending on the reason.

Kindly elaborate. TIA.

 

[David Dorward]

Kindly elaborate.

Give the list items that you wish to mark apart from the others a class.
Write selectors that are, aside from including that class, the same as the
selectors that already match.
In the style for those selectors, override the background-color.

 

[Mitja Trampus]

I have a menu setup using the following CSS code:

#nav ul{
margin:auto;
text-align:center;
margin-top:1px;
padding:0px;
display: block;
}
#nav ul li{
display: inline;
}
#nav ul li a{
/* display: block; */
/* float: left; */
margin-right:1px;
margin-left:1px;
margin-top:1px;
padding: 1px;
font:10pt arial,sans-serif;font-weight:normal;
background: #fbebbf;
border:1px solid red;
}
#nav ul li a:link {color:#000000;text-decoration:none;}
#nav ul li a:visited {color:#000000;text-decoration:none;}
#nav ul li a:hover {color:white;text-decoration:none;background:#330099;}
#navu ul li a:active {color:#6666cc;text-decoration:none;}

The menu looks like:

<div id="nav"><ul>
<li><a href="url1">Dest 1</a></li>
<li><a href="url2">Dest 2</a></li>
.
.
etc...
</ul></div>

How can I change the background color of individual buttons? IOW, if I
have seven buttons , but I want two of them to be a different color than
the rest.

As David pointed out, it's best to introduce a new class:
HTML:
<div id="nav"><ul>
<li><a href="url1">Dest 1</a></li>
<li><a href="url2" class="special">Dest 2</a></li>
<li><a href="url3" class="special">Dest 3</a></li>
<li><a href="url4">Dest 4</a></li>
CSS:
As above, plus e.g.
li.special { list-style-type: square }


But I expect you know this and the problem for you is that
there is no list-style-color CSS property. You can solve
this either by

a) specifying color:something for li, then have contents of
each li in a p, then doing something like
li.nonspecial p, li.special p {color:black}
li.nonspecial {color:blue}
li.special {color:blue}

b) using simple images (list-style-image:'...')instead of
glyphs like those you get with list-style-type:...

 

[Ed Jay]

As David pointed out, it's best to introduce a new class:
HTML:
<div id="nav"><ul>
<li><a href="url1">Dest 1</a></li>
<li><a href="url2" class="special">Dest 2</a></li>
<li><a href="url3" class="special">Dest 3</a></li>
<li><a href="url4">Dest 4</a></li>
CSS:
As above, plus e.g.
li.special { list-style-type: square }

But I expect you know this and the problem for you is that
there is no list-style-color CSS property. You can solve
this either by

a) specifying color:something for li, then have contents of
each li in a p, then doing something like
li.nonspecial p, li.special p {color:black}
li.nonspecial {color:blue}
li.special {color:blue}

b) using simple images (list-style-image:'...')instead of
glyphs like those you get with list-style-type:...

Good call. Thanks.