::first-letteron pseudoelementti, jonka avulla voit muotoilla elementin ensimmäistä kirjainta tarvitsematta liittää tagia kyseisen ensimmäisen kirjaimen ympärille HTML-koodissasi. Vaikka DOM: iin ei lisätä tunnisteita, on kuin ikään kuin kohdennettu ensimmäinen kirjain sisältyisi tagiin. Voit muotoilla ensimmäisen kirjaimen samalla tavalla kuin todellisen elementin:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Tulos on kuin sinulla olisi faux-elementti ensimmäisen kirjaimen ympärillä:
The first letter is bold and red.
Ensimmäinen kirjain on lihavoitu ja punainen
- Pseudo-elementti toimii vain, jos ylätason elementti on lohkon säilölaatikko (toisin sanoen se ei toimi
display: inline;alkuaineiden ensimmäisen kirjaimen kanssa ). - Jos sinulla on sekä
::first-letterja::first-lineelementtialustasta, ensimmäinen kirjain perivät ensimmäiseltä viivatyylejä mutta tyylejä::first-letterkorvaa kun tyylejä konflikti. - Jos luot sisältöä
::before, kohde on ensimmäinen kirjain tai välimerkki, olipa se osa alkuperäistä tekstisolmua tai luotu luodulla sisällöllä.
Lisää tietoa
- Kun käytät pudotuskorkkeja, käytä yhdessä niiden kanssa,
p:first-of-typejotta jokaista ensimmäistä kirjainta ei muotoilla - Esimerkki kynästä - luodulla sisällöllä
- W3C Wiki
- W3C CSS3 -valintamoduuli
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 | 5.0-5.1 |
Huomaa: Käytä Internet Explorer 8: ssa ja :first-lettersitä vanhemmissa versioissa kaksoispiste-merkinnän sijaan yhtä kaksoispistettä .