Question

I’m trying to understand CSS mechanism but tutorials so far haven’t been a great source. They only scratch the surface.

I need to understand the fundamental differences between using #navlist li #current and #navlist li .current.

The names are not generic in order to be a very practical example.

What I think the different is:

#navlist li #current

if applied to an li element inside a parent element #navlist will bypass any inherited format to display #navlist li #current format.

On the other hand:

#navlist li .current

will apply its format but also inherit from other format.

In this example:

#navlist li a:hover
{
  color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
}

#navlist li .current
{
  color: #000;
  background: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

<ul id="navlist">
    <li><a href="#" class="current">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Destinations</a></li>
    <li><a href="#">Discuss</a></li>
</ul>

The tab will be white with a black font but hover will be applied.

With this other example:

#navlist li a:hover
{
  color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
}

#navlist li #current
{
  color: #000;
  background: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

<ul id="navlist">
        <li><a href="#" id="current">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Destinations</a></li>
        <li><a href="#">Discuss</a></li>
</ul>

#current is applied and nothing else, leaving the tab white even if the mouse hover over it.

Is that right?

Answer 1

Is that right?

Yup. This is because a:hover is more specific than .current, but less than #current. So your hover styles will override your class styles, but your ID styles are untouched.

a:hover is more specific than .current because it combines a type selector and a pseudo-class selector. That beats out a class selector (although :hover and .current are equally specific), because of the a.

#current is more specific than a:hover because IDs are always the most specific, even if you combine a multitude of non-IDs in the hover style rule’s selector.