CSS #2: CSS Specificity Level: Intermediate When two or more selectors target

Question

CSS #2: CSS Specificity Level: Intermediate When two or more selectors target

property on an element, browsers will calculate Specificity of each selector.
more weight on Specificity of selector means more power and the winner is the Strongest rule.

——————
How is specificity calculated?

Specificity determined by the number of each selector type in the matching selector,
Here you can find selectors wieght list:

0-0-0-0-1 - Type selectors and pseudo-elements. (e.g., div, ::after)
0-0-0-1-0 - Class selectors, attributes selectors and pseudo-classes. (e.g,, .element, [type="radio"], :hover)
0-0-1-0-0 - ID selectors (e.g., #element)
0-1-0-0-0 - Inline style (e.g., `style="" )
1-0-0-0-0 - !important

When multiple declarations have equal specificity, the Last declaration found in the CSS is applied to the element.

Now you can look at attached picture and find out the calculated Specificity of each selector. (from weakest to strogest).

0

25.12.2018

1 ответов

13 просмотров

ꜱ-ᴋɪʟʟ · Answer 1

ꜱ-ᴋɪʟʟ Автор вопроса

0

25.12.2018

Похожие чаты

CSS #2: CSS Specificity Level: Intermediate When two or more selectors target

1 ответов

Похожие вопросы