CSS

CSS selektoriai ir specifiškumas

CSS selektoriai

Aprašant CSS stilių naudojami css selectoriai, pagal juos naršyklė nusprendžia kuriam elementui(-ams) pritaikyti stilių.
Jie užrašomi prieš patį stiliaus aprašą, pvz:

1
div.stalas { color: red; }

selektorius yra div.stalas.

Tokiam pačiam stiliui aprašyti galima panaudoti kelis selektorius, atskirtus kableliu:

1
div.stalas, p span { color: red }

tiek div.stalas, tiek p span tekstas bus nuspalvintas raudonai.

Žemiau pateikiami trys populiariausi selektoriai.

Elemento pavadinimas

Žemiausio lygio selektorius, pagal jį stilius pritaikomas visiems to pačio tipo elementams, pvz:

1
p { color: red; }

visų p elementų tekstas taps raudonas: demo

Klasė

Aukštesnio lygio nei vien tik elemento pavadinimas selektorius. Klasė nurodoma prie elemento HTML kode atributu class. Pagal ją stilius pritaikomas visiems elementams, turintiems šią klasę. CSS aprašomas prieš pavadinimą pridedant tašką.

1
.stalas { color: red; }

demo

ID

Identifikatorius — dar aukštesnio lygio selektorius. Pagal jį stilius pritaikomas elementui, turinčiam nurodytą ID. CSS aprašomas prieš pavadinimą prirašant #.

1
#antras { color: red; }

demo

Selektorių kombinavimas

Šiuos selektorius galima kombinuoti:

1
p.stalas { color: red; }

bus pritaikomas tik p elementams, turintiems klasę stalas.

1
p .stalas { color: red; }

(po p paliktas tarpas) bus pritaikomas tik elementams, turintiems klasę stalas ir esantiems elemente p.

1
p#antras { color: red; }

bus pritaikomas tik p elementui, turinčiam id antras.

1
p #antras { color: red; }

(po p paliktas tarpas) bus pritaikomas tik elementui, turinčiam id antras ir esančiam elemente p.

1
p .stalas #antras { color: red; }

(po p paliktas tarpas) bus pritaikomas tik elementui, turinčiam id antras ir esančiam elemente, kurio klasė yra stalas ir kuris yra p elemente.

Kiti selektoriai

Kiti svarbūs selektoriai yra pseudo klasės selektoriai, užrašomi pridedant dvitaškį prieš pseudo klasės pavadinimą, pvz.:

  • :visited
  • :link
  • :first-letter
  • :first-line
  • :nth-child
  • :after

Taip pat svarbūs: >, +, ~, *, [] ir kiti, apie kuriuos plačiau galite pasiskaityti čia:

CSS Specifiškumas

CSS stiliai nurodomi užrašant kelią iki elemento. Kuo kelias specifiškesnis, tuo didesnis prioritetas suteikiamas stiliui pritaikant stilių. Didžiausią prioritetą turi style atribute aptašytas stilius. Žemesnį turi ID, po jo eina klasė, paskutinėje vietoje elemento nurodymas:

Elementas Pavyzdys Daugiklis
Stiliaus atributas style=”…” 1000
ID atributas #my-id{…} 100
Klasės atributas .my-class{…} 10
Elementas div{…} 1

Prioritetas gali būti apskaičiuojamas sudėjus specifikatorius padaugintus iš savo daugiklio, pvz:

1
2
3
.baldai div.stalai #antras{
   ...
}

turi tokį prioritetą: 2 ⋅ 10 + 1 + 100 = 121

Jeigu du specifikatoriai turi tokį patį prioritetą, naudojamas tas, kuris yra arčiau elemento, kuriam stilius taikomas. Kitaip sakant failo apačioje esantis aprašymas turės didesnį prioritetą, nei esantis viršuje. Taip pat HTML faile žymoje <style> esantis aprašymas turės didesnį prioritetą, nei esantis atskirame css faile (nes yra arčiau HTML elemento). Ši taisyklė taikoma tik tada, kai dviejų specifikatorių apskaičiuotas prioritetas yra toks pats.

CSS klasės nurodymas

HTML elementui galima nurodyti kelias klases, atskiriant jas tarpo simboliu. Kokia tvarka klasės nurodomos nesvarbu, stiliaus prioritetas nustatomas tik pagal specifiškumą. Pavyzdys:

1
<div class="klase1 klase2">...</div>

Platesnė informacija žemiau pateiktuose straipsniuose: