How to calculate the cascading priority and why does it happen that way?

W

webrapist2016-04-03 18:17:00

css

webrapist, 2016-04-03 18:17:00

Greetings.

<body>
    <div class="article">
      <p>Some text is going right here</p>
      <p>Another text at the same place</p>
    </div>
  </body>

p {
  color: green;
}

.article {
  color: red;
}

Why is the text always green ?
I found a table in the book that says:

The tag selector has a value of 1 point.
Class selector - 10 items
ID selector 100 points
Inline style - 1000 points

Why do the tag selector styles predominate - p (1 point), while the second .acticle class selector has 10 points?

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

I

IceJOKER, 2016-04-03
@swibong

It seems logical, in one case you apply the style directly to some element, and in the other case it will simply inherit from the parent, the first case should logically be higher.
For several years of site building, I never needed to calculate priority, somehow I had enough knowledge that id is on the mountain, the class goes up the mountain, and the tag itself is at the bottom of the mountain - everything is extremely simple

A

Alexey Strukov, 2016-04-03
@pm_wanderer

Assign the article class to one of the paragraphs.
You now have the red color inherited by paragraphs but then redefined to green.

R

Rikcon, 2016-04-03
@Rikcon

p{} - MORE ACCURATE than .article because it points to the p SAM TAG.
.article is your div.
if you write

.article p {
  color: red;
}

it will kill styles that are just in p, because the selector has more weight.

P

Pavel Voronyuk, 2016-04-03
@pawlek

nesting is not affected.
If you assign a new color to p , then the .article color is ignored. Since you are coloring all p elements in the document, it
is correct to write for p tags that are in .article

.article p {
  color: red;
}