Selectors in CSS. Selector precedence

An HTML element can be a target several CSS rules. Let's use a simple paragraph as an example:

We can change this paragraph simply by using tag name:

P ( color: blue; )

Or we can use class name:

Message ( color: green; )

Or we can use identifier:

#introduction ( color: red; )

Since the browser can only choose one color and apply it to that paragraph, then it should decide which CSS rule has priority over others. This is called priority in CSS (or specificity).

In our example, the paragraph will be red, because identifier more specific and thus more important than other selectors.

Order of CSS Rules

If you have identical selectors in your CSS, the last one will take precedence.

P ( color: green; ) p ( color: red; ) /* The paragraph will be red */

Calculation 100

There is one quick way find out how “strong” a CSS rule is by calculating specificity selectors:

identifiers cost 100;
classes cost 10;
selectors tag cost 1.

The selector with the highest "score" will prevail, regardless of the order in which the CSS rules appear.

#introduction ( color: red; ) .message ( color: green; ) p ( color: blue; )

MarkSheet is a free guide to HTML and CSS.

The #introduction ( color: red; ) rule is more specific than others because the identifiers must be unique throughout the entire web page, so there can only be one target element.

Message ( color: green; ) will target any An HTML element with a class="message" attribute and therefore less specific. The same applies to p ( color: blue; ) , which can be intended for any paragraph.

How to avoid conflicts

While writing your CSS, problems can easily arise. conflicting rules, in which the same property is applied several times.

To avoid this:

use only classes: Use .introduction instead of #introduction even if the element only appears once on your web page;
avoid using several classes to one HTML element: write no
A
Which is semantically more descriptive;
don't use inline styles, such as
.

Any professional in his field should be fluent in terminology. If you are involved in layout, can you answer the question in the title of the article without hesitation?

Perhaps now you will discover something new. Let's take a decisive step towards professionalism :)

Inheritance

Let's start with the easiest concept to understand, CSS. Its essence is that the styles assigned to a certain element are inherited all children (nested elements) unless they are explicitly overridden. For example, the font size and color just need to be applied to the body descriptor so that all elements inside have the same properties. But, for headings h1-h6, the font size will not be assigned, because the browser has its own default style sheet for them, and inherited styles have the lowest priority. The situation is similar with the color of links.

Thus, inheritance allows you to reduce CSS table. But at the same time, if there are a lot of styles, then it becomes quite difficult to track which parent element set a certain property.

Cascading

Cascading rules allow you to resolve situations when several styles are specified for one element. Cascading is based on assigning a certain priority to each rule. Author style sheets have the highest priority, custom style sheets have the lowest priority, and browser default style sheets have the lowest priority. The user has the ability to override the author's rule by adding the!important flag to his own.

The cascading rules define the following priorities:

custom styles marked!important
author's styles marked!important
author's styles
custom styles
default styles

After cascading, the rules are ordered based on the specificity of the selectors.

Specificity

Specificity is a number in a system with an indefinitely high base, which is a reflection of the priority of a rule. It is calculated based on specificity each of the selectors included in the CSS rule.

Selector specificity is divided into 4 groups - a b c d:

if the style is inline, i.e. defined as style="", then a=1
the value of b is equal to the number of id selectors
the value of c is equal to the number of classes, pseudo-classes and attribute selectors
the value of d is equal to the number of type selectors

Example for calculating specificity:

Selector	Specificity	Specificity in the system with base 10
Style=""	1,0,0,0	1000
#wrapper #content()	0,2,0,0	200
#content.datePosted()	0,1,1,0	110
div#content()	0,1,0,1	101
#content()	0,1,0,0	100
p.comment.datePosted()	0,0,2,1	21
p.comment()	0,0,1,1	11
div p()	0,0,0,2	2
p()	0,0,0,1	1

An indefinitely high base of the number system is a consequence of the fact that it is not known in advance how large the numbers a, b, c, d will be. If they are less than 10, then it is convenient to use decimal SS.

Hello, dear readers of the blog site. Today I propose to continue the conversation about which we started in the above article. Even earlier, we got acquainted with what cascading style sheets are, learned what they mean, and much more.

All materials on cascading style sheets that have already been published on this blog can be found in. Today we will first talk about how you can combine and group selectors, and then we will look in detail at the rules that apply to the same element in HTML code(Important, counting selectors and writing rules in the style attribute).

Combinations and Grouping of Selectors in CSS

So, in previous articles we managed to consider 7 types:

Of these seven possible types V CSS language combinations can be made. All combinations that we will make are directly related to (ancestors - descendants, parents - children, brothers - sisters).

The first type of combination is called context selector . It takes into account the relationship of HTML code elements according to the “Ancestor - Descendant” principle:

Separate selectors in combinations are written separated by a space, and you need to read it from right to left. That. The CSS rules will only apply to the last one of this combination (the rightmost one), and everything that comes before it only allows us to specify a more precise application (targeting) for our rules (emphasize).

The first example says that all elements of B (in bold) that have ancestors Div elements, will be painted in green.

In the above code, only the underlined fragment will be colored green, because among its ancestors there is a Div, and the second fragment of code, highlighted with the B tags, will remain the color that is selected for it by default, because the Div container is no longer among its ancestors (only P and Body):

Such combinations work in any browser.

The next type of combination would be child selector, which is built on the principles of relationships between code elements of the “Parent - Child” type:

They are written with a separating more familiar (>):

This entry will be interpreted by the browser as follows: for , the “parent” (closest ancestor) of which is the Div container, will be highlighted in red.

In the example above, only the outlined paragraphs will be colored red because they are enclosed directly in the Div container that is their parent (closest ancestor). If you modify the above example of a child selector to look like this:

Body > p (color:red)

Then only the last paragraph will be highlighted in red, because... its parent is the Body tag, and the first two paragraphs will remain in their default color (Body is their parent, but not their parent, which is Div). Child selectors don't work in Ie 6 browser.

How and why selectors are grouped in CSS code

The last combination is called adjacent selectors and meets the principles of relationships between HTML code elements of the “Sisters - Brothers” type. They can use either “+” or “~” as a separator:

This entry means that the contents of element I (italicized) will be colored red only if its nearest neighbor to the left (top in code) is element B (bold). For example, this condition would be met in this example:

If you write the adjacent selector in Css code like this:

H1 ~ p (color:red)

This will mean that all paragraphs (P) that have an adjacent H1 element (heading) located higher in the code will be colored red. This refers specifically to neighboring elements (relationships of the “Sisters - Brothers” type). In the example below, the given selector will be matched by the circled paragraphs:

Combinations of adjacent selectors in the Ie 6 browser are also, unfortunately, not supported. In Ie 6 only the first type of combination is supported, but in Ie 7 and higher all others are supported. In other browsers there should be no problems.

Selectors in Css you can also group. For example, if some of them use one or more identical rules, then they can be combined into a group to reduce the amount of Css code.

In the example shown in the screenshot, it is repeated for each header selector (h1-3), which can cause complexity (multiple work) if you want to change the value of this property. Therefore, the second option of a grouped entry looks a little preferable.

Please note that when grouping selectors are written separated by commas. If there are more identical rules, then the code savings will be more noticeable. And those rules that were unique must still be written down individually.

Priorities of CSS properties (with and without important)

Now let's think about what styling will use the browser if there are no styles for of this element No HTML code provided? And for this there is a corresponding specification, where all this is described.

As you can see, the final separation of Html and Css has now occurred. Those. even for pure HTML code, the browser will still use the default properties of style sheets. So here are the default properties: have the lowest priority.

The properties that the user assigns in his browser settings have higher priority. These styles will be applied to any documents he views in this browser.

True, not all browsers have this feature, but last resort, Ie and Opera have it. Those. If desired, the user will be able to include his own CSS file as a source of style markup.

For example, in Ie, to do this, you need to select “Tools” - “Internet Options” from the top right menu, and then on the first “General” tab click on the bottom “Appearance” button. In the window that opens, you need to check the “Design using a custom style” box and use the “Browse” button to find the CSS style markup file you need on your computer:

Those. the user has the ability to make any site opened in the browser look in accordance with his requirements described in the CSS file. It's called "custom styles" and they take precedence over the styles that are defined in the default specification. But the so-called author's styles will have even greater priority.

That is, if I (the site developer) wanted to use styles other than the default ones in the design of any Html code element (remember, they are described in the specification), then the user, with his own Css file He won’t be able to interrupt my design.

Will the user be forced to accept this? No. He has the opportunity Increase the priority of your CSS properties by adding Important at the end of each of them. This word is written through space character and is preceded by an exclamation point:

P (color:red !important;)

If the user has the same property with Important in his own style file, which he connected to the browser, then he will see all paragraphs in red. But the author (developer) of the site could also use Important for this property. Who will win then and whose priority will be higher?

We decided that custom styles with Important will in any case have a higher priority than the author's styles, whether with or without Important.

Let's summarize in the form of a list all the information presented regarding the priorities of style properties. The priority will decrease from top to bottom:

Custom with Important
Copyright with Important
Copyright
Custom
Styles accepted for Html elements in the specification by default (when neither the author nor the user have specified anything else)

Those. without Important, author's styles are more important, and with them, user styles are the most important and priority. Well, now let’s deal with the author’s tables, because what the user does is unknown to us and is shrouded in darkness.

How to increase the priorities of CSS properties in author styles

It is now that we move on to the question cascading tables CSS styles . Let's look at this with an example to make it clearer. Let's say we have a piece of code with the following Html elements (a paragraph inside a Div container):

Container Contents

Let's first write down the following properties:

P (color:red) .sbox (background:#f0f0f0)

As a result, both the first of them will be applied to the paragraph (since it is formed by the P tag), and the property that sets the gray background for the element with the “sbox” class, which this paragraph again has:

Now let's add one more property to the second selector (of the class), which will conflict with the first line (they both set , but use different values):

P (color:red) .sbox (background:#f0f0f0;color:blue)

This will cause the paragraph text color to change to blue instead of red.

Why? Because this is exactly the way conflict is resolved when the same HTML element code receives several identical rules at once, but with different values and from different places Css code. In order to determine which rule has higher priority, you need to count its selectors.

Besides this yourself selectors have gradation according to priorities. ID has the highest priority. In this example, the text color will be blue precisely because the priority of the Id (#out) will be higher than that of the tag selector (p):

P (color:red) #out (color:blue)

Further down the priority ladder are selectors for classes, pseudo-classes and attributes. In the following example, the tag (p) will play again and the color of the paragraph text will be blue, because it competes with the selector of a higher priority (class):

P (color:red) .sbox (color:blue)

Well, the lowest priority (not counting the universal *, which has the lowest weight and does not make any changes to such butting) is the selectors of tags and pseudo-elements.

Div p (color:red) p (color:blue)

What color will the resulting paragraph text be? That's right, it's red, because... This property has more tag selectors (two versus one). Oh how. Those. Ids are considered first. If the winner is not identified, then classes, pseudo-classes and attributes are considered. Well, if nothing was resolved there or no such ones were found, then selectors of tags and pseudo-elements are considered.

But it is quite possible that a winner will not emerge and the selectors of competing classes will have equal priority in total. For example, for our long-suffering paragraph enclosed in a Div container:

Container Contents

It would be quite possible to write a piece of CSS code like this:

Div.box #out(color:red) #in p.sbox(color:blue)

And what color should the paragraph text be? Both combinations describe exactly our paragraph. The first should, as usual, be read from right to left: apply these properties (color: red) to an element with Id #out, which is located somewhere inside (have it among the “ancestors”) of the Div container with the class.box (div.box ). Completely matches our paragraph.

The second combination: apply these properties (color:blue) to a paragraph element with the sbox class (p.sbox), which is inside any element with Id #in. Again, it completely describes our paragraph. Let's count the selectors.

IDs occur once in both combinations, and the same can be said about classes. All that remains is to count the tag selectors, but they are also used the same number of times in both combinations (one). Ambush.

We got it equal priorities at the same property having different meanings(text color red or blue). How will the browser solve this dilemma?

The rule will apply here - who's last, he's right. Therefore, in my example, the color of the paragraph text will be blue, because this property (color:blue) is located lower in the code. If these rules are reversed:

#in p.sbox(color:blue) div.box #out(color:red)

As a result, the color of the paragraph text will change to red. Q.E.D. You can add, for example, another tag selector to any combination and we will tip the scales in its favor, even if it is not lower in the code:

Body #in p.sbox(color:blue) div.box #out(color:red)

In this case, the color of the paragraph will change to blue. The universal selector “*” has no effect on the calculation of priorities at all. By the way, just above we looked at a way to increase the priority of CSS rules by adding Important. In our example it might look like this:

P (color:green !important) #in p.sbox(color:blue) div.box #out(color:red)

What color will the paragraph text be in this case? Green, of course. And you don’t even need to count anything, because adding Important to the style property this one solves controversial issue unambiguously, no matter where it is in the code and how many selectors it has.

But Important is not the only way to unconditionally increase the priority of a property. The second way to increase may be to use style properties in the Style attribute the HTML element you need.

Those. inside the same long-suffering P tag, add a Style attribute specifying any color:

Container Contents

That's it. Now, regardless of what properties are specified for this element in external file style sheets or inside Style Html code tags, the paragraph text color will be yellow.

But it won’t be able to beat the properties with Important. Those. V last example where we added the "p (color:green !important)" rule, the text color will still be green even though style="color:yellow".

In fact, the priority of the two rules (with Important in the external style sheet file and in the style attribute) is equal, which means we need to proceed to counting the selectors. Can they really be inside the style attribute?

Yes, there cannot be any, which means that the rule written in the style attribute will always lose to the rule with Important only due to the smaller number of selectors (zero will be less than any number).

Well, what then? will give the highest priority to the Css property? That's right, it will be written in the style attribute and even with Important:

Container Contents

In this case, the color of the paragraph text will be yellow and it will be impossible to interrupt this with anything in the author’s styles. We have found an absolute way to set styles. It can only be interrupted by a user with his own style file and the Important property specified for this.

So let's try to compose list of factors influencing priority properties in author's styles in descending order:

Specifying a property in the style attribute the desired tag together with Important
Adding Important to a property in an external style sheet file or in the style tag directly in the Html code
Simply setting this property in the style attribute is needed on the element
Using a larger number of Ids for a given property
Usage more class, pseudo-class or attribute selectors
Using more tag selectors and pseudo-elements
Lower property placement in CSS code, all other things being equal

In fact, the rules in the style attribute are used extremely rarely (imagine how difficult it would be in this case to make changes to the entire site code, and not to separate file CSS).

This attribute is mainly used when you just need to quickly test something. Well, it’s also convenient if you insert your code into other people’s Html pages, which have their own style and which can be inherited () for your inserted elements.

Why and how to insert your code into other people's pages? We may not need to, but Yandex and Google do this when or on other people’s sites (our sites).

By adding the style attribute to all elements of the ad block code, with the properties specified in it and the added Important, you no longer have to worry about the ad code being changed in any way (although Yandex ads can still be changed using CSS and Important, apparently they did not use this method).

Good luck to you! See you soon on the pages of the blog site

You can watch more videos by going to

");">

Style priorities depending on selector type

Yes, CSS selectors also affect style priorities, and not only simple selectors (classes, tag selectors, attributes, etc.) are taken into account, but also complex ones (child, neighbor, descendant selectors, etc.).

To calculate the priority level (specificity) of a selector, browsers use a specific algorithm, where each type is assigned a certain amount points, which determines the weight of the selector. The styles of the selector that gains the most weight will ultimately be applied to the element. If it turns out that some selectors that affect the same HTML element score the same number of points, then the style properties of the one located in the code below will be used.

Now let's look at how browsers calculate these scores.

Universal selector- the number of points awarded is zero (0).
Tag selectors And pseudo elements- one (1) point for each.
Attribute selectors, classes And pseudo classes- ten (10) points for each.
Identifiers- one hundred (100) points for each identifier in the selector.
Style attribute - built-in styles do not use selectors, but are specified directly inside element tags, but at the same time they have the highest priority, calculated in one thousand (1000) points.

To help you better understand how these virtual points are calculated, here are some simple examples.

* ( ) /* 0 points */ em ( ) /* 1 point */ p::first-letter ( ) /* 2 points (one tag selector and one pseudo-element) */ p ( ) /* 11 points (one each tag and attribute selector) */ div.fine .one ( ) /* 21 points (two classes and one tag selector) */ #header a:hover ( ) /* 111 points (identifier, tag selector and pseudo-class) */

As you can see, everything is quite simple. Just don't get scared in advance by thinking that you'll have to constantly calculate these points when creating your style sheets. In fact, no one ever just thinks of them that way. Usually people think about selector priority only when some styles don’t want to work. This is where the “dancing with a tambourine” and the search for the culprit begin. :)

An example demonstrating selector priorities

Selector priorities

Regular paragraph.

Note.

Result in browser

Regular paragraph.

Note.

In this example, the note text color is black, like the rest of the paragraphs, although it is set to green, and the property used is lower in the code. However, border styles and padding have been added to the note. Why this happened, I think, is clear. The solution in this situation would be to additionally place the #content identifier in front of the note class, which will increase the weight of the selector, or apply the !important rule, which you will read about below.

Chris Coyier

A question of correct understanding of the term CSS specificity and its role in web development often comes with some challenges. The best way to approach this topic is to look at an example that shows CSS specificity at its most complex form and perhaps contradicts your assumptions. This article uses just such a method to understand the principles of calculating the actual specificity value of CSS selectors and determining their priority.

As an example, let's take a regular unordered list representing three types of drinks:

Whiskey

Beer

Cola

Now, let's say we want to visually highlight one of the drinks that is most preferred. To do this, you need to provide the appropriate tool - specify the class name for the required list element:

Whiskey

Beer

Cola

Favorite (
color: olive;
font-weight: bold;
}

All that remains is to look at the result of this code. But alas, we did not get the expected effect - the text of the drink we selected (Whiskey) will not be highlighted and displayed in the same way as the rest of the list elements. What's the matter?

A possible cause of the problem could be another rule that is defined in the same CSS document, which looks like this:

ul#drinksli (
color: black;
font-weight: normal;
font-size: 13px;
}

It is this CSS rule that contains definitions that prevent the desired list element from being visually highlighted. The document used contains two various CSS selectors applied to a single element ( .favorite and ul#drinks li), which provide different meanings for the color and font weight of the text it contains. As for the font size, everything is clear here - the code in question contains only one expression that determines its value (font-size: 13px), so that is what will be used. The problem is in this case, is that the browser must determine which of the conflicting rules to give preference to when processing the document. It is precisely for these purposes that they are intended CSS values the specificity of each of the rules.

Most problems arise from novice web developers who do not understand the principle by which a working rule is selected. They tend to assume that the .favorite selector should take precedence since it is lower in CSS structure code or because the definition of the class="favorite" attribute in HTML markup document is closer to the text content of the page element we are interested in (

). But all this, of course, is misconception.

Yes, indeed, the CSS specification stipulates that the position of the rule in the code structure matters. And the one below does have priority, but only if the values specificity the expressions under consideration are the same. Here's an example:

Favorite (
color: olive;
}
.favorite (
color: black;
}

In this case, the font color of the selected list item will be black ( *because the last rule overrides the meaning of the first). But we have deviated a little from the topic.

A slightly different principle works here. Whenever you create a selector for a CSS rule, always make it as specific as possible and reasonable. (*For this you need to use more complex selectors). Looking at the simplest example above, you probably figured out that using just the class name .favorite for the selector that selects the desired drink from the list will not be enough. And this will not allow you to extract the “right drink” from the general list for further formatting. And if it somehow worked once, then there is no guarantee that everything will go as smoothly in the future. To achieve the desired result you need to use a more specific selector:

ul#drinks li.favorite (
color: olive;
font-weight: bold;
}

That's exactly what I call a fairly specific selector , that is, the one that in this case most accurately indicates the required element and at the same time is sufficient, not containing unnecessary elements, which you can do without. For example, this option will be redundant, although it will also work:

html body div#content ul#dirnks li.favorite (
color: olive;
font-weight: bold;
}

Such a selector is also acceptable, but it clutters up the CSS code too much, which significantly reduces its readability. Moreover, such redundancy is of no use. There is another way to "isolate" the required element, by increasing the CSS specificity value of the .favorite selector using a ! important:

Favorite (
color: olive! important;
font-weight: bold! important;
}

Use of declaration! important is universal method prioritization CSS rules. And with its help, you can forcibly redefine previously assigned properties of an element, but this method is radical and in some cases its use is not justified.

If you use keyword! important for other purposes, then you can only complicate your task. In the case when you are familiar with a certain CSS code and know for what purpose each selector contained in it is used, then using the ! important is quite justified to simplify the code structure and increase its readability. But if you use it to quickly redefine properties provided by another author, without delving into the structure of the code and the principles of its operation, then this can lead to undesirable consequences.

One of classic examples which I use:

Last-block (
margin-right: 0! important;
}

I use this class in cases where there are several “floating” blocks on the page ( *with the float property set, in this case with the value left), which are placed in one row. At the same time, by assigning this class name to the last block in the row (the rightmost one), I completely eliminate the situation when it does not fit tightly to the border of the container, which is unacceptable in my case. Even if somewhere in the structure of the CSS code, within a rule with a more specific (concrete) selector, other values of the margin-right property are defined for the blocks used, then applying the .last-block class to the outermost elements will allow them to be reset. At the same time, we do not use any additional selector components that specify it, which simplifies the presentation of the code.

Calculate CSS specificity value.

Looking at the previous example, we found out that our first attempt at defining the font color and font weight for a list item failed because we used a selector with only one class name, which has a lower CSS specificity value, and was overridden by a selector that selects unordered list by its ID, which has a higher specificity value. Key values in this case, they are class names (class) and element identifiers (ID). It is very important to know that CSS standards provide significant differences in specificity weights for class selectors and ID identifiers. Selectors that use element identifiers have a clear advantage over those that use only class names. For any number of class names in the selector, it will be overridden by another selector containing one element identifier.

Now let's schematically look at the method for defining and writing CSS selector specificity values:

In other words:

If an element tag has a style attribute, then all properties defined within it have maximum priority (the specificity value in this case receives the highest rank - 1,0,0,0).
For each element identifier used within the selector, one is added to the corresponding specificity bit - 0,1,0,0.
Each class name, as well as a pseudo-class or attribute selector (* element), present in the rule selector adds one to the next specificity bit - 0,0,1,0.
And the last, lowest digit, receives one for each element name present in the selector - 0,0,0,1.

You can get rid of the commas and convert CSS specificity values to a more familiar form of representing values - regular numbers: 1,0,0,0 can be represented as 1000, which is significantly larger than the value 0,1,0,0 or 100. The commas used in this case are intended to clearly separate the meanings of the different specificity bits. For example, if a CSS selector uses 13 class names, pseudo-classes and/or attribute selectors (which is unlikely), then the specificity value in this case might become 0,1,13,4 , which cannot be represented in decimal form.

Directive! important , immediately following a specific one CSS property, a priori gives maximum value its specificity. It overrides even those properties specified in the inline "class" attribute of the element tag. The only way to override a property is with the ! important is the creation of a new rule containing the same property and declaration ! important which is located below in the CSS code. In addition, the second rule must have equal or great value specificity than the first (which needs to be reversed). In other words, for the ! important you can define one more digit in the specificity value - 1,0,0,0,0 , although such an entry, of course, does not exist.

* Comprehensive information according to the declaration! important can be read.

*Translator's note.