Cand vom avea mai multe elemente in pagina cu siguranta vom ajunge in situatia cand vor exista conflicte intre reguli. Acest lucru este de asteptat si cateodata ni-l dorim.

Conflictele in CSS inseamna ca aceeasi proprietate vine cu doua valori din doi selectori diferiti. De exemplu: 

<html>
    <head>
        <style>
            p {
                font-size: 16px;
                margin-bottom: 10px;
            }
            div > p {
                font-size: 14px;
                background: #80DEEA;
            }
        </style>
    </head>
    <body>
        <p>
            Un paragraf
        </p>
        <div>
            <p>
                Alt paragraf
            </p>
        </div>
    </body>
</html>

Aceasta este un caz destul de intalnit. Avem o regula generala ce se aplica pentru toate paragrafele din pagina. Vrem ca ele sa aiba o anumita marime a fontului.

Dar paragrafele din <div> vrem sa ai aiba o alta marime a fontului. Asa ca cele doua proprietati sunt in conflict acum.

Efectul de cascada

Daca avem doua reguli in conflict restul proprietatilor nu sunt afectate. Pentru paragrafele din interiorul elementului <div> regulile finale ce vor fi aplicate sunt: 

margin-bottom: 10px;
font-size: 14px;
background: #80DEEA;

Asa ca regulile se aduna, se creeaza un fel de reuniune a doua multimi.

Cum castiga o regula

Exista mai multe reguli in CSS care dicteaza ce valoarea pentru o proprietate va castiga, printre care: specificitatea selectorului si pozitia regulii in codul CSS cand selectorul e acelasi.

De cele mai multe ori specificitatea unui selector dicteaza ce regula castiga.

In cazul de mai sus a doua valoare pentru font-size castiga, pentru ca al doilea selector este mai specific.

Următoarea lecție >