Specificità

Podcast CSS - 003: Specificità

Supponi di lavorare con i seguenti codici HTML e CSS:

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

Ci sono due regole concorrenti qui. Uno colorerà il pulsante di rosso e l'altro di blu. Quale regola viene applicata all'elemento? Comprendere la specificità dell'algoritmo della specifica CSS è fondamentale per capire in che modo il CSS decide tra regole concorrenti.

La specificità è una delle quattro fasi distinte della cascata, di cui abbiamo parlato nell'ultimo modulo, a cascade.

Punteggio di specificità

Ogni regola del selettore ottiene un punteggio. Puoi considerare la specificità come un punteggio totale e ogni tipo di selettore guadagna punti per quel punteggio. Vince il selettore con il punteggio più alto.

Con la specificità in un progetto reale, Il bilanciamento è assicurarsi che le regole CSS che prevedi di applicare vengano applicate e, in genere, mantenere bassi i punteggi per evitare complessità. Il punteggio dovrebbe essere il più alto possibile, anziché puntare al punteggio più alto possibile. In futuro potrebbe essere necessario applicare alcuni CSS davvero più importanti. Se scegli il punteggio più alto, farai fatica.

Punteggio per ogni tipo di selettore

Ogni tipo di selettore guadagna punti. Somma tutti questi punti per calcolare la specificità complessiva di un selettore.

Selettore universale

Un selettore universale (*) non ha specificità e riceve 0 punti. Ciò significa che qualsiasi regola con 1 o più punti la sostituirà

* {
  color: red;
}

Selettore di elementi o pseudo-elemento

Un elemento (tipo) o pseudo-elemento ottiene 1 punto di specificità .

Selettore del tipo

div {
  color: red;
}

Selettore di pseudo-elemento

::selection {
  color: red;
}

Selettore di classi, pseudoclassi o attributi

Una classe, pseudo-classe o Il selettore di attributo ottiene 10 punti di specificità.

Selettore classe

.my-class {
  color: red;
}

Selettore pseudo-classe

:hover {
  color: red;
}

Selettore attributo

[href='#'] {
  color: red;
}

La :not() la pseudo-classe stessa non aggiunge nulla al calcolo della specificità. Tuttavia, i selettori passati come argomenti vengono aggiunti al calcolo della specificità.

div:not(.my-class) {
  color: red;
}

Questo campione dovrebbe avere 11 punti di specificità perché ha un selettore del tipo (div) e una classe all'interno di :not().

Selettore ID

Un documento di identità ottiene 100 punti di specificità, purché utilizzi un selettore ID (#myID) e non un selettore di attributi ([id="myID"]).

#myID {
  color: red;
}

Attributo di stile incorporato

CSS applicato direttamente all'attributo style dell'elemento HTML, ottiene un punteggio di specificità di 1000 punti. Ciò significa che, per sostituirlo in CSS, devi scrivere un selettore estremamente specifico.

<div style="color: red"></div>

!important regola

Infine, un !important alla fine di un valore CSS ottiene un punteggio di specificità di 10.000 punti. Questa è la specificità massima che un singolo elemento può ottenere.

Una regola !important viene applicata a una proprietà CSS, in modo che tutti i contenuti della regola generale (selettore e proprietà) non abbiano lo stesso punteggio di specificità.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

Verifica le tue conoscenze

Verifica le tue conoscenze in materia di punteggio di specificità

Specificità nel contesto

La specificità di ogni selettore che corrisponde a un elemento viene sommata. Considera questo esempio di codice HTML:

<a class="my-class another-class" href="#">A link</a>

Questo link contiene due corsi. Aggiungi il seguente CSS e otterrai 1 punto di specificità:

a {
  color: red;
}

Fai riferimento a una delle classi di questa regola, ora ha 11 punti di specificità:

a.my-class {
  color: green;
}

Aggiungi l'altra classe al selettore, ora ha 21 punti di specificità:

a.my-class.another-class {
  color: rebeccapurple;
}

Aggiungi l'attributo href al selettore, ora ha 31 punti di specificità:

a.my-class.another-class[href] {
  color: goldenrod;
}

Infine,aggiungi una pseudo-classe :hover a tutto questo, il selettore ottiene 41 punti di specificità:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

Verifica le tue conoscenze

Verifica le tue conoscenze in materia di punteggio di specificità

Visualizzazione della specificità

Nei diagrammi e nei calcolatori della specificità, la specificità viene spesso mostrata come segue:

Il gruppo a sinistra è id selettori. Il secondo gruppo è costituito dai selettori di classe, da attributo e pseudo-classe. L'ultimo gruppo è costituito dai selettori di elementi e pseudo-elemento.

Come riferimento, il seguente selettore è 0-4-1:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

Verifica le tue conoscenze

Verifica le tue conoscenze della specificità visualizzando

Aumentando in modo pratico la specificità

Supponiamo di avere alcuni CSS simili ai seguenti:

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

Con un codice HTML simile al seguente:

<button class="my-button" onclick="alert('hello')">Click me</button>

Il pulsante ha uno sfondo grigio perché il secondo selettore guadagna 11 punti di specificità (0-1-1). Questo perché ha un selettore del tipo (button), che è pari a 1 punto e un selettore di attributi ([onclick]), che corrisponde a 10 punti.

La regola precedente, .my-button, ottiene 10 punti (0-1-0), perché ha un selettore di classe.

Se vuoi potenziare questa regola, ripeti il selettore della classe in questo modo:

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

Ora il pulsante avrà uno sfondo blu, perché il nuovo selettore ottiene un punteggio di specificità di 20 punti (0-2-0).

Un punteggio di specificità corrispondente vede la vittoria dell'istanza più recente

Per il momento continuiamo con l'esempio del pulsante e spostiamo il CSS in questo:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

Il pulsante ha uno sfondo grigio perché entrambi i selettori hanno lo stesso punteggio di specificità (0-1-0).

Se cambi le regole nell'ordine di origine, il pulsante diventerà blu.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

Questo è l'unico caso in cui prevale un CSS più recente. A questo scopo, deve corrispondere alla specificità di un altro selettore che ha come target lo stesso elemento.

Risorse

• SpeciFISHity CSS
• Calcolatore della specificità
• Specificità della rete multicanale
• Specifiche sulla specificità dei CSS
• Un altro calcolatore di specificità