Specificità CSS

Cos'è la specificità?

Se ci sono due o più regole CSS conflittuali che puntano allo stesso elemento, il browser seguirà alcuni principi per determinare quale è la più specifica e quindi vincente.

Considera la specificità (specificity) come un punteggio/graduatoria, che può determinare quali dichiarazioni di stile verranno applicate all'elemento finale.

Il selettore universale (* ha una specificità più bassa, mentre il selettore ID ha una specificità più alta!

Attenzione:Questa specificità è una delle ragioni comuni per cui le regole CSS non si applicano a certi elementi, anche se potresti pensare che dovrebbero esserlo.

Specificity hierarchy

Each selector has its position in the specificity hierarchy. The following four categories define the specificity level of selectors:

Inline styles - Inline (inline) styles are directly attached to the element to be styled. Example: <h1 style="color: #ffffff;">.

ID - IDs are unique identifiers for page elements, such as #navbar.

Classes, attributes, and pseudo-classes - This category includes .classes, [attributes], and pseudo-classes, such as :hover, :focus, etc.

Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before, and :after.

How to calculate specificity?

Please remember the method for calculating specificity!

Starting from 0, add 1000 for the style attribute, 100 for each ID, 10 for each attribute, class, or pseudo-class, and 1 for each element name or pseudo-element.

Think about the following three code snippets:

Esempio

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • A's specificity is 1 (one element)
  • B's specificity is 101 (one ID reference and one element)
  • C's specificity is 1000 (inline style)

Since 1 < 101 < 1000, the third rule (C) has higher specificity and will be applied.

Specificity Rule 1:

In cases of equal specificity: the latest rule is important - If the same rule is written twice in an external stylesheet, the rule that appears later in the stylesheet is closer to the element to be styled and will be applied:

Esempio

h1 {background-color: yellow;}
h1 {background-color: red;}

Prova a farlo tu stesso

The following rule always applies.

Specificity Rule 2:

ID selectors have higher specificity than attribute selectors - See the following three lines of code:

Esempio

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Prova a farlo tu stesso

The first rule is more specific than the other two and will be applied.

Specificity Rule 3:

Context selectors are more specific than single element selectors - Inline styles are closer to the element they style. Therefore, in the following cases:

Esempio

CSS file from outside:

#content h1 {background-color: red;}

Nel file HTML:

<style>
#content h1 {
  background-color: yellow;
}
</style>

Applicherà la regola successiva.

Regola di specificità 4:

Il selettore di classe supera qualsiasi numero di selettori di elementi - Selettore di classe (come .intro supera h1, p, div ecc.):

Esempio

.intro {background-color: yellow;}
h1 {background-color: red;}

Prova a farlo tu stesso

Inoltre,Il selettore universale e i valori ereditati hanno 0 - La specificità di * e body *, e simili, è 0. La specificità dei valori ereditati è anche 0.