difference between #navlist li #current and #navlist li .current

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?

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.

Yes. (And seems specificity is the reason as BoltClock said)

This page will tell you how the browser read your css selector: http://www.css-101.org/descendant-selector/go_fetch_yourself.php

remember: id is unique, can be used for 1 element only; but class can be used to more than 1 element and tag

note: actually both rule select the same element and applied. If you write more in #navlist li a:hover, those non-overlapping prosperities will appear when mouse over #current (so call 'cascading')

more: Some keyword/concept you need to know: inheritance/cascading, css selector, css specificity, pseudo class

p.s. try jsbin / jsfiddle / cssdesk for your css test - learn from practice :D

I think you've got some syntax errors in your question. This style:

#navlist li .current

will target a child element of your LI, like this:

<ul id="navlist">
     <li>
          <a href="#" class="current">Foo</a>
     </li>
</ul>

I'm assuming you intend to put a class or ID of "current" on the LI itself. If so, your rule should look something like:

#navlist li.current // no space in between 'li' and '.current'

Also remember that ID's are "weighted" more than Classes in CSS. So if you have two equally structured rules, but one uses and ID and the other uses a class, then the ID rule will trump the class rule. They BOTH will appy, but the ID rule will apply LAST. This is important to note if you are doing font-sizing and such, where rules are cumulative instead of just overriding each other.