Pseudo-klase i elementi

  • Autor objave:
  • Kategorija objave:CSS
  • Vrijeme čitanja:1 min read

Pseudo-klase se koriste za definiranje posebnog stanja elementa.

Sintaksa

selector:pseudo-class {
property: value;
}

:first-child vs :first-of-type

:first-child specificira element koji je first child od drugog elementa (bilo kojeg tipa) dok :first-of-type specificira element koji je prvi od određenog tipa elementa.

npr. za HTML

<div>
	<h1>naslov</h1>
	<p>prvi odlomak</p>
	<p>drugi odlomak</p>
</div>

<div>
	<p>prvi odlomak</p>
	<p>drugi odlomak</p>
</div>

i CSS

p:first-child {
  color: blue
}

plavi će biti samo odlomak u drugom divu jer u prvom je first-child od diva-a h1 tag.

a za isti HTML i ovakav CSS

p:first-of-type {
  color: blue
}

plavi će biti prvi odlomci u oba diva jer su prvi od p tagova i u jednom i u drugom divu.

(n) kod pseudo-klasa

Kod pseudo-klasa tipa :nth-child(n) n može biti broj, ali i odd / even (neparni / parni).

Linkovi

Oznake: ,