::first-linePseudo-prvek je určen pro použití stylů na první řádek prvku. Představte si odstavec, který má několik řádků (například tento!). ::first-lineumožňuje stylovat tento první řádek textu. Můžete jej použít ke zvětšení nebo jako stylistickou volbu v malých písmenech. Množství textu, na které tento pseudo-prvek cílí, závisí na několika faktorech, jako je délka řádku, šířka výřezu, velikost písma, řádkování písmen, řádkování slov. Jakmile se řádek zalomí, text po něm již nebude vybrán. Upozorňujeme, že zde není vybrán žádný skutečný prvek DOM (tedy „pseudo“ prvek).
Tento pseudo-prvek pracuje pouze na blokových elementů (pokud displayje nastaveno buď na block, inline-block, table-caption, table-cell). Pokud je nastaven na vloženém prvku, nic se nestane, i když má tento vložený prvek zalomení řádku.
Všimněte si také, že ne všechny vlastnosti lze použít v sadě pravidel obsahující ::first-line. Většinou:
.element::first-line ( font-style:… font-variant:… font-weight:… font-size:… font-family:… line-height:… color:… word-spacing:… letter-spacing:… text-decoration:… text-transform:… background-color:… background-image:… background-position:… background-repeat:… background-size:… background-attachment:… )Oficiální specifikace CSS říká, že agenti uživatelů mohou povolit další vlastnosti, pokud se jim to líbí:
UA mohou použít i jiné vlastnosti.
Slovo ke specifičnosti
Následující ukázka ukazuje, jak ::first-lineje možné přepsat jakýkoli druh specificity, dokonce !important.
- První parapgraf je nastaven na šedou barvu pomocí selektoru značek
- Druhý parapgraf je nastaven na šedou barvu pomocí selektoru třídy
- Třetí parapgraf je nastaven na šedou barvu pomocí voliče ID
- Čtvrtý parapgraf je nastaven na šedou skrz! Důležitý bash
Je to proto, že s pseudoelementem se zachází jako s podřízeným elementem, nejen s částí nadřazeného elementu. Pravidla, která na něj použijete, jsou tedy pouze pro něj, nadřazená pravidla k němu mohou kaskádovat.
Zkuste také změnit velikost prohlížeče, abyste zjistili, jak se chová pseudoelement při změně šířky výřezu.
Neexistuje žádný: poslední řádek nebo: n-tý řádek, i když by to bylo skvělé.
Podpora prohlížeče
| Chrome | Safari | Firefox | Opera | TJ | Android | iOS |
|---|---|---|---|---|---|---|
| Ano | Ano | Ano | 3,5+ (staré) 9+ | 5,5+ (starý) 9+ | Ano | Ano |
Jelikož ::first-linejde o pseudoelement, mělo by mu předcházet dvě dvojtečky, jak je uvedeno v CSS2.1. Některé prohlížeče však podporují pouze syntaxi s dvojtečkou (Internet Explorer 5.5 - 9 a Opera 3.5 - 9).