CSS Szelektorok Erőssége (Specificity)

A CSS specificity (szelektorok erőssége) határozza meg, hogy melyik CSS szabály érvényesül, ha több szabály vonatkozik ugyanarra az elemre. A specificity egy négyszámjegyű érték (a,b,c,d), ahol:

a: Inline style (style="" attribútum)
b: ID szelektorok száma (#)
c: Osztályok, attribútumok és pseudo-osztályok száma
d: Elemek és pseudo-elemek száma

Specificity Kalkulátor

Inline

ID

Class

Element

Szelektorok Erősségi Sorrendje

Szelektor	Specificity	Magyarázat
`*`	0,0,0,0	Universal szelektor - leggyengébb
`div`	0,0,0,1	Elem szelektor
`.class`	0,0,1,0	Osztály szelektor
`[type="text"]`	0,0,1,0	Attribútum szelektor
`div.class`	0,0,1,1	Elem + osztály
`#id`	0,1,0,0	ID szelektor
`style=""`	1,0,0,0	Inline stílus
`!important`	∞	Mindent felülír

Élő Példák

Példa 1: Alap szelektorok

Ez a doboz demonstrálja az alap szelektorok erősségét

div.example-1 { background: red; }         /* 0,0,1,1 */
.example-1 div { background: blue; }       /* 0,0,1,1 */
#unique-example-1 { background: green; }    /* 0,1,0,0 - Ez nyer! */

Példa 2: Összetett szelektorok

Ez a doboz demonstrálja az összetett szelektorok erősségét

.container .section .example-2 { background: blue; }     /* 0,0,3,0 - Ez nyer! */
.example-2[data-demo="true"] { background: red; }       /* 0,0,2,0 */

Példa 3: Inline és !important

Ez a doboz demonstrálja az inline stílus és !important működését

.important-demo { background: blue !important; }    /* !important - Ez nyer! */
.override-test { background: red; }
style="background-color: yellow"                    /* Inline, de !important erősebb */