CSS Pseudo-elemente. Pseudo-elemente și clase CSS. Pseudo-elemente multiple

Pseudo-elemente și clase CSS

Pseudo-elementele pot fi combinate cu clase CSS:

Exemplu:

p.intro::first-letter {
  color: #ff0000;
  font-size:200%;
}

Exemplul de mai sus va afișa prima literă din paragrafe cu class = "intro", cu roșu și cu o dimensiune mai mare.

Pseudo-elemente multiple

Mai multe pseudo-elemente pot fi, de asemenea, combinate.

În exemplul următor, prima literă a unui paragraf va fi roșie, cu o dimensiune xx-large. Restul primei linii va fi albastru, și small-caps. Restul paragrafului va fi dimensiunea și culoarea implicită a fontului:

Exemplu:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}