Kas ir pseidoelements?

CSS pseidoelement ir atslēgvārds, kas pievienots selektoram, ļaujot stilizēt noteiktu elementa daļu bez papildu dominējošu elementu skaidras izveides.

Biežāk izmantotie pseidoelementi:

• ::before: ievieto ģenerētu saturu pirms izvēlētā elementa satura.
• ::after: ievieto ģenerētu saturu pēc izvēlētā elementa satura.
• ::first-line: piemēro stilus pirmajai rindai bloka elementā.
• ::first-letter: piemēro stilus pirmajai burta daļai bloka elementā.
• ::selection: piemēro stilus daļai no elementa, kas ir izvēlēta ar lietotāja rīkiem (piemēram, teksts, kas ir atlasīts ar peles klikšķi).
• ::placeholder: piemēro stilus teksta aizpildītājam <input> vai <textarea> laukos.

Piemērs ::before un ::after izmantošanai:

div::before {
  content: "Preambula: "; // obligāts īpašums content
  color: blue;
}

div::after {
  content: " Suffix"; // obligāts īpašums content
  color: red;
}

Piemērs ::first-line un ::first-letter izmantošanai:

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

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

Pseidoelementi ir noderīgi dekoratīvu elementu pievienošanai, satura ģenerēšanai, teksta daļu stilizēšanai un citām uzdevumu izpildes vajadzībām, vienkāršojot HTML struktūru. Vēsturiski tie sākās ar vienu divpunkti (:), bet CSS3 specifikācija ieviesa divus divpunktus (::) atšķiršanai starp pseido-klasēm (:hover, :focus) un pseidoelementiem, lai gan viens divpunkts joprojām ir atbalstīts vecākās pārlūkprogrammās. Ieteicams lietot ::.