Need Help Understanding Specificity

[Ant]

I'm not sure if what I need help with is "specificity" or not.

 

Here's a situation which always confuses me. (see code below)

I have the navigation as I want it BUT I want the FIRST li item called "Online Store"

to have a different style. So I thought if I created a class or id for that list item I could stylize it

differently than the other items. The problem is I don't know how as it is being overridden by the css class for

"sidemenu"

 

Any help is appreciated.

 

 

My HTML is this:

 

<ul class="sidemenu">

 

<li id="online_store_link"><a title="Online Store" href="#">Online Store</a></li>

 

<li><a title="Specials" href="#"><span style="color: #f03b0e;">★ Specials</span></a></li>

<li><a title="Fly Rods" href="#">Fly Rods</a></li>

<li><a title="Fly Reels" href="#">Fly Reels</a></li>

<li><a title="Fly Lines" href="#">Fly Lines</a></li>

 

 

</ul>

 

 

 

My CSS is this:

 

 

/*----------------store left navigation-------------*/

 

 

ul.sidemenu {

padding: 0;

margin: 0;

list-style: none;

font-family: 'Arvo', serif;

font-weight: 500;

font-size: 12px;

width: 180px;

 

}

 

ul.sidemenu li {

border-top: 1px solid #FFFFFF;

border-bottom: 1px solid #FFFFFF;

margin: 0;

list-style: none;

}

 

ul.sidemenu li a {

text-decoration: none;

display: block;

width: 161px;

color: #333333;

 

padding: 15px 10px 15px 10px;

background-color: #d6dddf;

}

 

ul.sidemenu li a:hover {

background-color: #FFFFFF;

color: black;

}

 

 

 

 

 

/*----------------end store left navigation-------------*/

 

Thanks,

A.

[Andrea]

Try putting your CSS for #online_store_link AFTER what you have up there - that should do it. If not, can you post the link to the site you're working on?

[Ant]

I had this (see code below) AFTER that CSS, but I am not sure it's done properly(I know it's not working thats for sure). I don't think i am grasping the difference between this:

 

#online_store_link li{

 

}

 

 

OR

 

li #online_store_link{

 

}

 

 

 

 

---------

 

 

#online_store_link{

style="font-size: 17px;

padding: 7px 0px 7px 7px;

background-color: #1f262e;

color: #ffffff;"

}

 

 

 

 

#online_store_link li {

border-top: 1px solid #FFFFFF;

border-bottom: 1px solid #FFFFFF;

margin: 0;

list-style: none;

}

 

#online_store_link li a {

text-decoration: none;

display: block;

width: 161px;

color:#333333;

 

padding: 15px 10px 15px 10px;

background-color: red;

}

 

#online_store_link li a:hover {

background-color: #FFFFFF;

color: green;

}

 

---------------

 

Thanks,

A.

[Ant]

Ok, I got it to work, just like Andrea said.

 

I must have had some errors in there while trying so many different variables.

 

Here's the css I used:

 

#online_store_link{

font-size: 17px;

padding: 7px 0px 7px 7px;

background-color: #1f262e;

border-top: 1px solid #FFFFFF;

border-bottom: 1px solid #FFFFFF;

margin: 0;

list-style: none;

}

 

#online_store_link a{

text-decoration: none;

display: block;

width: 161px;

color:#ffffff;

background-color: #1f262e;

padding: 15px 0px 15px 10px;

 

}

 

#online_store_link a:hover {

background-color: #1f262e;

color: #8bab0b;

}

 

I still would like to know what the difference between these 2 types of css are:

 

#online_store_link li{

 

}

 

 

OR

 

li #online_store_link{

 

}

 

 

Thanks,

A.

[falkencreative]

I still would like to know what the difference between these 2 types of css are:

 

#online_store_link li{

}

 

 

OR

 

li #online_store_link{

}

The first is an example of a list item within an element that has an id of #online_store_link. For example:

 

<ul id="online_store_link">

<li>Selected element</li>

</ul>

 

The second is the element with an id of #online_store_link within a list item. For example:

 

<li>

<a id="online_store_link">Selected element</a>

</li>

[Ant]

Thanks Ben that's what I needed.

 

That helps clear things.

 

A.