[2-5] I have a question from CSS Cascade!

Asked 2 years ago, Updated 2 years ago, 136 views

I was curious because you said that the id selector's score is 100 points and the class' score is 10 points, so I made an example sentence on the code pen.

https://codepen.io/Neodahl/pen/MVXxyg

In the pen above, when you use one id selector for the p tag and 11 class selectors at the same time, the style of the class should be applied, but the style of the id selector will be applied.

I don't know what's wrong with the way I calculated<

fast-frontend css cascade

2022-09-22 20:31

1 Answers

Hello, I'm YAMOO.

In the video lecture, I told you that for convenience, the score of the id attribute is higher than the class attribute, so it is a priority.

However, @NeoDahl did it himself, and even if the number of classes was 11, it could not take precedence over the id attribute value. There's a reason for this. Let's find out why. :-)

CSS is a language where understanding the concept of cascade(priority) is important.

At the most basic level, the order of the CSS rules is important, but it's actually more complicated. Which choice has priority in a cascade depends on three factors.

From the results of the practice based on item 2, it is easy to think that the class attribute with 11 values will take precedence over the id attribute value. If you look at the image below, you can see the score criteria based on the number of each attribute.

However, the priority over item 2 is importance.

This means that no matter how many class property values are, they are less important than the id property. Looking at the image below, CSS cascading has a higher priority than calculating property values.

It would be helpful if you read the reference book below in additionally. :-)

FIN.


2022-09-22 20:31

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.