Mis on pseudoelement?

CSS pseudoelement on võtmesõna, mis lisatakse selektorile, võimaldades stiliseerida kindlat osa elemendist ilma täiendavate domineerivate elementide loomata.

Kõige sagedamini kasutatavad pseudoelemendid:

• ::before: lisab genereeritud sisu enne valitud elemendi sisu.
• ::after: lisab genereeritud sisu pärast valitud elemendi sisu.
• ::first-line: rakendab stiile esimesele reale blokielemendis.
• ::first-letter: rakendab stiile esimesele tähemärgile blokielemendis.
• ::selection: rakendab stiile osale elemendist, mis on kasutaja poolt valitud (näiteks teksti valimisel hiirega).
• ::placeholder: rakendab stiile sisestusvälja tekstile <input> või <textarea>.

Näide ::before ja ::after kasutamisest:

div::before {
  content: "Eessõna: "; // kohustuslik omadus content
  color: blue;
}

div::after {
  content: " Lõpp"; // kohustuslik omadus content
  color: red;
}

Näide ::first-line ja ::first-letter kasutamisest:

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.1em;
}

Pseudoelemendid on kasulikud dekoratiivsete elementide lisamiseks, sisu genereerimiseks, teksti osade stiliseerimiseks ja muude ülesannete lihtsustamiseks, lihtsustades HTML-struktuuri. Ajalooliselt algasid need ühe kooloniga (:), kuid CSS3 spetsifikatsioon kehtestas kaks koolonit (::) pseido-klaside (:hover, :focus) ja pseidoelementide eristamiseks, kuigi üks koolon (:) on endiselt toetatud vanemate brauserite poolt. Soovitatav on kasutada ::.