CSS CSS Basics (2014) Basic Selectors Reusing Classes

Aaron Michael Ho
PRO
Aaron Michael Ho
Pro Student 1,299 Points

Weight of competing CSS selectors

In this video, it's mentioned that an "id" selector holds more weight than a "class" selector. So if an element has: -a blue background because of its "class"; and -a green background because of its "id"

      The resultant background would be blue.

Where does the 'type/element' selector come in? If my type selector calls for it to be gray, what color will the background be now?

      Still blue?

1 Answer

Ezra Siton
Ezra Siton
12,629 Points

Who wins? in your case the ID

id > class > element

Why? The following list of selector types increases by specificity (MDN docs):

  1. Type selectors (e.g., h1) and pseudo-elements (e.g., :before).
  2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
  3. ID selectors (e.g., #example).

Example:

<style>
p{

 color:red;
}

.blue{
color: blue;

}

#orange{
color: orange

}
</style>

<p class="blue" id="orange">
  the color text is orange
</p>

Nice visual link to learn this issue: https://specificity.keegan.st/