0

does use id or class to select the element matter? The whole navigation div should be blue when it is hovered since it is applied after the magenta. 

.navigation {
  color: salmon;
  height: 100px;
}

#navigation:hover {
  color: magenta;
}

.navigation:hover {
  color: blue;
}

.navigation li a {
  text-decoration: none;
  color: inherit;
}
  <div id="navigation" class="navigation">I am navigation text!
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
misterManSam
  • 24,303
  • 11
  • 69
  • 89
Weilin Hong
  • 41
  • 5
  • 2
    Well, what's the point in asking this? Why not just one selector, and one `:hover` selection? – Rojo Oct 31 '19 at 01:48
  • have a look into [order of precedence for CSS](https://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css) – Nidhin Joseph Oct 31 '19 at 01:50
  • Yes it matters, this is called *CSS specificity*. You can read up more here: https://marksheet.io/css-priority.html – Gosi Oct 31 '19 at 01:59

1 Answers1

2

Please refer to this resource: Calculating CSS Specificity Value

... Simply using the class name by itself had a lower specificity value and was trumped by the other selector which targeted the unordered list with the ID value. The important words in that sentence were class and ID. CSS applies vastly different specificity weights to classes and IDs. In fact, an ID has infinitely more specificity value! That is, no amount of classes alone can outweigh an ID.

In summary, ID is more specific than Class, therefore an element with the same CSS attribute being specified (e.g. color) within an ID and Class will have the value of the ID attribute specification, not the Class specification.

Inline styles are more specific yet again, and will trump an ID style.

enter image description here

As sourced from: https://css-tricks.com/specifics-on-css-specificity/#article-header-id-0

EGC
  • 1,719
  • 1
  • 9
  • 20