CSS tekoelementti viittausopas

CSS:n pseudoelementit

CSS:n pseudoelementit käytetään elementin tiettyjen osien tyylittelyyn.

Esimerkiksi, sitä voidaan käyttää:

  • Aseta elementin ensimmäisen kirjaimen tai ensimmäisen rivin tyyli
  • Lisää sisältöä elementin sisällön ennen tai jälkeen
  • Aseta luettelojen kohteen merkin tyyli
  • Aseta dialogin taustan näkymän tyyli

Seuraavassa taulukossa esitetään CSS:n eri pseudoelementit:

Pseudoelementti Esimerkki Esimerkki kuvaus
::after p::after Lisää sisältöä määritetyn elementin sisällön jälkeen.
::backdrop dialog::backdrop Aseta dialogi- tai ponnahdusikkunan taustan näkymän tyyli.
::before p::before Lisää sisältöä ennen määritettyä elementin sisältöä.
::file-selector-button ::file-selector-button Valitse tyyppiä <input type="file"> oleva painike.
::first-letter p::first-letter Valitse jokaisen <p>-elementin ensimmäinen kirjain.
::first-line p::first-line Valitse jokaisen <p>-elementin ensimmäinen rivi.
::grammar-error ::grammar-error Aseta selaimen merkinnät kielioppivirheeksi.
::highlight() ::highlight(custom-name) Valitse mukautettu korostus.
::marker ::marker Valitse luettelojen kohteen merkki.
::placeholder input::placeholder Aseta <input> tai <textarea>-elementin paikallismerkin tekstin tyyli.
::selection ::selection Aseta käyttäjän valitseman tekstin tyyli.
::spelling-error ::spelling-error Aseta selaimen merkinnät väärin kirjoitetuksi tekstiksi.
::view-transition ::view-transition Rakenne, joka edustaa näkymän siirtymisen päällekkäisyyden juurta, sisältäen kaikkien näkymien siirtymät sivulla.
::view-transition-group ::view-transition-group Rakenne, joka edustaa yksittäisen näkymän siirtymisen otoksia.
::view-transition-image-pair ::view-transition-image-pair Rakenne, joka edustaa näkymän siirtymisen 'vanhaa' ja 'uutta' näkymätilaa (siirtymisen ennen ja jälkeen).
::view-transition-new ::view-transition-new Edustaa näkymäsiirtymän ‘uutta’ näkymätilaa.
::view-transition-old ::view-transition-old Edustaa näkymäsiirtymän ‘vanhaa’ näkymätilaa.