CSS Selektor matematika

Da li Vam se dešavalo da ne možete da preklopite neki stil koji ste napisali u prethodnom delu koda? Iako bi ovo trebalo da bude prilično jednostavno zato što CSS funkcioniše kaskadno - primenjuje se ono poslednje napisano. Nažalost ovo nije uvek istina, a najbolje ću pokazati uz pomoć primera.

Evo primera jedne proste navigacije:

<ul id="nav">
    <li>Početna</li>
    <li>O meni</li>
    <li>Kontakt</li>
</ul>

Tokom razvoja aplikacije želite da dodate "aktiv" klasu, koja će da naznači krajnjem korisniku na kojoj se stranici nalazi.

<ul id="nav">
    <li class="trenutna">Početna</li>
    <li>O meni</li>
    <li>Kontakt</li>
</ul>

Naravno, to dodate u CSS, recimo ovako:

.trenutna {
    color: #FF0000;
    text-decoration: underline;
}

... Osvežite stranicu ... ne radi... ???

Nervnozno prolazite kroz CSS gore-dole i uporno ne primećujete ovo:

ul#nav li {
    color: #343F44;
    text-decoration: none;
}

Ovo izgleda normalno zato što se nalazi pre našeg dodatka .trenutna. Ali na žalost to nije tako jednostavno.

Računanje preciznosti

Svaka CSS definicija ima svoju težinu koja je određena brojem tipova selektora unutar definicije.

Tipovi selektora

1. Selektori elementa (h1, a, h5, p, body,...)
2. Selektori klasa (.klasa)
3. Selektori ID-a (#neki-id)
4. Inline selektori (style="color: red;")

Svaki od njih dodaje određenu težinu definiciji selektora:

1. Elementi - 1
2. Klase, pseudo, atributi - 10
3. ID-evi - 100
4. Inline selektori - 1000

Ako postoji ovakav selektor:

.clasa > li > a možemo lako da izračunamo težinu:
Jedna klasa = 10
Dva elementa = 1 + 1
Ukupna težina = 12

Malo prostiji način računanja jeste da zamislimo četvorocifreni broj, gde su jedinice broj html elemenata u selektoru, desetice broj klasa u selektoru, stotice broj ID-jeva u selektoru i hiljade ako postoji inline stil.

Recimo imamo ovakav selektor:
nav#nav > ul.lista > li.active > a

Težina je:

Pseudo selektori

Pseudo selektori takođe utiču na težinu selektora. Oni se ubrajaju u desetice kao i klase.

.nav li:first-child

Težina ovog selektora je: 0021

Pseudo elementi

Pseudo elementi takođe utiču na težinu selektora, ali kao element. Znači dodaje se kao jedinica.

.lista > .element::before

Težina ovog selektora je: 0021

:not() selektor

:not() selektor je izuzetak. On se ne računa kao selektor, već se računa ono unutar njega.

.lista:not()

Težina ovog selektora je: 0010

Međutim, ako stavimo klasu, id ili element unutar :not() selektora, ti elementi će se računati.

.lista:not(.numerisana)

Težina ovog selektora je: 0020

!important deklaracija

!important igra vrlo važnu ulogu ali ne na nivou selektora, nego na nivou vrednosti.

.nav { color: #F00 !important; }

U ovom primeru color ima najveću moguću vrednost i nije je moguće preklopiti niti jednom težinom selektora.

Način na koji možemo da predefinišemo !important deklaraciju je:

1. Korišćenjem !important deklaracije uz veću težinu selektora.

.nav li { color: red !important; } /* ovo vazi */
.nav { color: green !important; }

2. Definisanjem iste !important deklaracije samo kasnije

.nav { color: red !important; }
.nav { color: green !important; }