Lecture
The CSS abbreviation stands for Cascading Style Sheets (cascading style sheets), where one of the keywords is “cascade”. In this case, a cascade means the simultaneous application of different style rules to the elements of a document — by connecting several style files, inheriting properties, and other methods. So that in such a situation the browser understands what the rule to apply to the element as a result and does not cause conflicts in the behavior of different browsers, some priorities have been introduced.
Below are the priorities of the browsers that guide them in processing style rules. The higher the item in the list, the lower its priority, and vice versa.
Browser style has the lowest priority — a design that is applied by default to browser elements of a web page. This design can be seen in the case of “bare” HTML, when no styles are added to the document.
How to set a custom style was described in Chapter 1 (see Fig. 1.3 and 1.4).
The! Important keyword plays a role when users connect their own style sheet. If a contradiction arises, when the style of the author of the page and the user for the same element does not match, then! Important allows you to increase the priority of the style or its importance, in other words.
When using a custom style sheet or simultaneously applying a different author and user style to the same selector, the browser is guided by the following algorithm.
The syntax for using! Important is as follows.
Свойство: значение !important First, the desired style property is written, then its value is separated by a colon, and at the end after the space, the keyword! Important is indicated.
Increasing importance is required not only to regulate the priority between the author and the user style sheet, but also to increase the specificity of a particular selector.
If conflicting style rules are applied to one element at the same time, then the higher priority is given to the rule whose value of the specificity of the selector is greater. Specificity is a certain conditional value, calculated as follows. For each identifier (further we will denote their number by a) 100 are charged, 10 classes are charged for each class and pseudo-class, 10 are charged for each tag selector and pseudo-element (c) we add up the specified values in a certain order, we get the specificity value for this selector.
* {} /* a=0 b=0 c=0 -> специфичность = 0 */ li {} /* a=0 b=0 c=1 -> специфичность = 1 */ li:first-line {} /* a=0 b=0 c=2 -> специфичность = 2 */ ul li {} /* a=0 b=0 c=2 -> специфичность = 2 */ ul ol+li {} /* a=0 b=0 c=3 -> специфичность = 3 */ ul li.red {} /* a=0 b=1 c=2 -> специфичность = 12 */ li.red.level {} /* a=0 b=2 c=1 -> специфичность = 21 */ #t34 {} /* a=1 b=0 c=0 -> специфичность = 100 */ #content #wrap {} /* a=2 b=0 c=0 -> специфичность = 200 */ The inline style added to the tag via the style attribute has a specificity of 1000, so it always overlaps the related and global styles. However, the addition of! Important overlaps including inline styles.
If two selectors have the same specificity, then the style specified in the code below will be applied.
Example 19.1 shows how specificity affects the style of list items.
Example 19.1. List color
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Список</title> <style> #menu ul li { color: green; } .two { color: red; } </style> </head> <body> <div id="menu"> <ul> <li>Первый</li> <li class="two">Второй</li> <li>Третий</li> </ul> </div> </body> </html> In this example, the text color of the list is set to green, and the second item in the list using the class two is highlighted in red. We calculate the specificity of the selector #menu ul li - one identifier (100) and two tags (2) total the value 102, and the selector .two will have a specificity value of 10, which is clearly less. Therefore, the text will not be painted in red. To remedy the situation, it is necessary either to lower the specificity of the first selector, or to increase the specificity of the second one (Example 19.2).
Example 19.2. Change in specificity
/* Понижаем специфичность первого селектора */ ul li {...} /* Убираем идентификатор */ .two {...} /* Повышаем специфичность второго селектора */ #menu ul li {...} #menu .two {...} /* Добавляем идентификатор */ #menu ul li {...} .two { color: red !important; } /* Добавляем !important */ Adding an identifier is used not only to change the specificity of the selector, but also to apply a style only to the specified list. Therefore, the reduction of specificity due to the removal of the identifier is rarely used, mainly increases the specificity of the desired selector.
1. What is the specificity of the table.forum tr: hover p selector?
2. What specificity will the #catalog .col3 .height div selector have?
1. 23
2. 121
Comments
To leave a comment
Cascading CSS / CSS3 Style Sheets
Terms: Cascading CSS / CSS3 Style Sheets