CSS - Specificitatea pe intelesul tuturor.

Salut tuturor, astazi voi incerca sa prezint un concept foarte important in ceea ce priveste intelegerea CSS-ului.Acest concept se refera la modul in care navigatoarele web decid ce declaratii sau ce valori ale proprietatilor similare sa foloseasca atunci cand un element HTML este identificat de mai multi selectori sau cand asupra unui element se aplica declaratii din mai multe surse ( interne, externe, fisiere de stil sau in linie, folosind atributuls style ).

Inainte de toate, este necesar sa cunoastem ca o regula este formata din unul sau mai multi selectori si un bloc de declaratii.Fiecare declaratie are in componenta o proprietate si o valoare pentru acea proprietate separate prin caracterul doua puncte.De asemenea, fiecare declaratie se termina folosind caracterul punct si virgula.Proprietatea indica ce vrem sa modicam la un element HTML, in timp ce valoarea unei proprietatii indica cum vrem sa modificam acea proprietate.

Selectorul identifica elementul sau elemente carora vrem sa le descriem prezentare prin declaratiile din blocul de declaratii.

selector {
    proprietate: valoare; /* aceasta este o declaratie */
    proprietate: valoare; /* aceasta este o alta declaratie */
}

Mergem mai departe, sa intelegem despre ce este vorba pe baza unui exemplu.

<div id="page-header" class="main-header">
    Acesta este un sir de caractere fara sens.
</div>

div#page-header {
    color: blue;
}

div.main-header {
    color: red;
}

Elementul HTML div este identificat de cei doi selectori.Fiecare selector foloseste doar o singura declaratie, avand o proprietate similara dar cu valori diferite.Ce culoare va avea text-ul din interiorul acestui div?

Ei bine, text-ul va fi albastru, dar cum a decis navigatorul web acest lucru? Asta vom vedea pe parcursul acestui tutorial.

Desi poate nu observati ( nici eu nu am observat ), in functie de cat de specific este un selector, cu atat el are o importanta mai mare.Selectorul ID poate identifica doar un singur element si acel element are doar un ID, unic in pagina web, in timp ce selectorul clasa poate identifica unul sau mai multe elemente ce au o aceeasi clasa, fiecare element putand avea mai multe clase.Mai mult decat atat, selectorul element poate selecta unul sau mai multe elemente de acelasi tip.

Haide sa mai vedem un exemplu:

<ul id="menu">
    <li class="active">Cartofi prajiti</li>
    <li>Ciorba de legume</li>
</ul>

ul#menu li {
    color: green;
}

li.active {
    color: blue;
}

Ce culoare va avea elementul li a carui clasa este active ? Ei bine, toate elementele li, direct descendente elementului ul al carui id este menu vor avea culoarea verde.Acelasi principiu, doi sau mai multi selectori identifica acelasi element HTML, in cazul nostru li, nimic nou.Se pare ca selectorul ID este oarecum mai important, fiind mai specific, in timp ce selectorul clasa este mai putin specific, mai general.

Ei bine, este vorba de specificitate, am definit acest concept chiar la inceputul tutorialului.Stim ca are legatura cu selectorii si mai stim ca se aplica doar atunci cand un element este identificat de doi selectori sau cand asupra unui element se aplica declaratii CSS din mai multe surse.

Cum calculam aceasta specificitate?

Ei bine, este vorba de un numar format din 4 cifre, fiecare cifra reprezentand un anumit tip de selectori.Acest numar indica ce declaratii sau valori are proprietatilor similare sa se foloseasca.

Prima cifra, avand si specificitatea cea mai mare, este reprezentata de declaratiile in line ale unui element HTML.Cu alte cuvinte, declaratiile in linie ale unui element HTML folosind atributul style rescriu orice alta declaratie, indiferent de sursa declaratiilor CSS ( interne sau externe )

A doua cifra este ocupata de selectorii ID ( #page-header, #menu )

A treia cifra este ocupata de selectorii clasa ( .main-header ), selectorii de tip atribut ( [type="text"] ) si pseudo-clasele ( :hover, :focus )

Ultima cifra, avand si specificitatea cea mai mica, este ocupata de selectorii element ( h1, p ) si pseudo-elementele ( :before, :after ).

Cu alte cuvinte, pe baza selectorilor folositi de o regula CSS putem afla ce specificitate are acea regula CSS.

Selectorul universal ( * ), combinatorii ( +, > ~ ) si pseudo-clasa :not() nu influenteaza specificitatea absolut deloc.Selectorii ce se afla in interiorul pseudo-clasei :not() afecteaza specificitate, dar vom discuta mai tarziu despre acest lucru.

Sa calculam specificitatea regulilor CSS de mai sus incepand cu primul exemplu, astfel totul va deveni cat mai clar.

div#page-header {
    color: blue;
}

div.main-header {
    color: red;
}

Prima regula are o specificitate egala cu 0101, ultima regula avand o specificitate egala cu 0011.Dupa cum putem observa, prima regula CSS este mai importanta si va rescrie declaratiile sau valorile proprietatilor similare din ultima regula CSS.

Daca inca nu este totul clar, pentru prima regula am calculat specificitatea astfel.In primul rand, prima cifra este reprezentata de declaratiile in linie folosind atributul style pentru elementul div ce are ID-ul, menu, dar nu avem asa ceva, ceea ce inseamna ca vom pune 0.Urmatoarea cifra reprezinta selectorul ID, avand doar unul ( menu ) deoarece un element poate avea doar un ID unic in pagina, vom pune 1.Apoi urmeaza cifra ce reprezinta selectorii clasa, pseudo-clasele si selectorii de tip atribut, dar nu avem asa ceva, vom pune 0, nu uitati vorbim de prima regula.In final, ultima cifra este reprezentata de toti selectorii de tip element si pseudo-elemente, avem doar un selector de tip element, el fiind atasat ca prefix selectorului de tip ID.Astfel am ajuns la 0101.

Pentru urmatorul exemplu avem:

ul#menu li {
    color: green;
}

li.active {
    color: blue;
}

Prima regula CSS are o specificitate de 0102, ultima avand o specificitate de 0011, fiind mai mica.Acum sper ca totul are sens.

Din aceasta lupta a specificitatii, mereu va castiga specificitatea mai mare, astfel acele declaratii, sau acele valori ale propietatilor similare vor fi folosite, din sursa folosita ( in line, externa sau interna ).

Exceptia ce "incalca" specificitatea folosind `!important`

Daca adaugam unei declaratii !important, acea declaratie CSS va rescrie orice alta declaratie CSS, indiferent de specificitate.Daca doua declaratii, ce au acceasi proprietate dar valori diferite, folosesc !important, castiga ceea cu specificitatea cea mai mare.

Sa consideram primul exemplu:

div#page-header {
    color: blue;
}

div.main-header {
    color: red !important;
}

Astfel, prima regula desi are o specificitate mai mare, nu va rescrie valoarea proprietatii similare color din ultima regula.Acest lucru se intampla tocmai datorita adaugarii !important.Acest "truc" nu se recomanda absolut deloc, complica foarte mult totul.Acum text-ul este rosu.

Exceptia facuta de pseudo-clasa :not()

Desi este o pseudo-clasa, aceasta nu afecteaza specificitatea absolut deloc, cu alte cuvinte, nu este luata in calcul, dar daca cautati mai multe informatii, veti afla ca aceasta pseudo-clasa accepta selectori in interiorul parantezelor rotunde, ceea ce inseamna ca acei selectori afecteaza specificitatea.

Selectorul element versus declaratiile mostenite

Declaratii adaugate folosind un selector element mereu vor rescrie declaratiile mostenite de la elementul parinte al tipului de element HTML identificat de selectorul element.

<div class="parent">
    <h1>Imi place muzica de opera super mult!</h1>
</div>

.parent {
    color: red;
}

h1 {
    color: green;
}

Continutul elementului h1 va fi de culoare verde.

Ei bine, cam atat cu acest tutorial, foarte multe explicatii dar nimic complicat daca va pasioneaza ceea ce faceti, cu pasiune, totul este o placere nesfarsita.