CSS selectors

Hi!
In many sources I’ve read priority of a tag is higher than class.
But this code displays vice versa. (heading should be green, but it’s red!)
Please explain me why. Sorry for my english.


<!DOCTYPE html>
<html>
<head>
  <title>Vacation World</title>
  <link href="./style.css" type="text/css" rel="stylesheet">
</head>

<body>
   <div class="description">A city-size shrine to the Renaissance, Florence offers frescoes, sculptures, churches, palaces, and other monuments from the richest cultural flowering the world has known. Names from its dazzling historical pastDante, Michelangelo, Galileo, Machiavelliare some of the most resonant of the medieval age. <a href="http://travel.nationalgeographic.com/travel/city-guides/florence-italy/" target="_blank">Learn More</a>.
    <h5>Top Attractions</h5>
    <ul>
      <li>Museums</li>
      <li>Bike Tours</li>
      <li>Historical Monuments</li>
    </ul>
  </div>
</body>
</html>

.description {
  		color: green;
}

h5 {
  		color: red;
}

Hi, Welcome to the forums.

CSS that is more specific will be applied with higher priority (so to speak).

So for example if you have the following heading:

<h5 id="test" class="description">Top Attractions</h5>

And the CSS:

.description {
  	color: blue;
}

h5 {
	color: red;
}

#test {
	color: orange;
}

The CSS will be applied from the least specific to the most specific in this order:

tag    >    class             > id
h5     >    .description      > #test

In this scenario, the h5 is the least specific as it means ALL h5 elements. Then you get the class, as classes can be applied to more than 1 element of the website (for example all of the headings).

Lastly you get the id. This is a value that has to be a unique value in the html document and is thus also the most specific of the 3. It points to a certain html element.

With this in mind, in the above scenario, the “Top Attractions” h5 element will be orange.

When the id is removed as follows:

<h5 class="description">Top Attractions</h5>

This will result in the heading text being blue because the class is now more specific to this element.


TLDR: In your case, the h5 CSS is more specific than the class of the parent div, hence the heading is red.

3 Likes

Please point us to one of those sources. Perhaps the wording is not easy to clearly understand.

TYPE selectors have the lowest specificity, meaning they are the least important of all the selectors, along with their counterpart, pseudo-type selectors.

0    0    0    1

Consider this as a table of specificity, with TYPE being the right most column. Class is the column next to that, moving to the left.

0    0    1    0

That also includes pseudo-classes.

ID is next on the left…

0    1    0    0

and STYLE (the attribute) is the leftmost, or highest specificity.

We do have a trump card, !important but that should be used only as a last resort, and should be resolved so it does not have to live in the production style sheet. If we must resort to using it, that generally means there is a cascade issue or an inline style that the external styles cannot override.

1    0    0    0
1 Like