::first-lineПсевдо-елемент призначений для застосування стилів до першому рядку елемента. Уявіть абзац довжиною у кілька рядків (як цей!). ::first-lineдозволяє стилізувати перший рядок тексту. Ви можете використовувати його, щоб збільшити його, або встановити в маленьких ковпачках як стилістичний вибір. Кількість тексту, на який націлений цей псевдоелемент, залежить від кількох факторів, таких як довжина рядка, ширина області перегляду, розмір шрифту, інтервал між літерами, інтервал між словами. Як тільки рядок розривається, текст після цього більше не виділяється. Зверніть увагу, що тут не вибрано жодного фактичного елемента DOM (таким чином, “псевдо” елемент).
Це псевдо-елемент працює тільки на блокові елементи (коли displayвстановлюється або block, inline-block, table-caption, table-cell). Якщо встановлено на вбудованому елементі, нічого не відбувається, навіть якщо в цьому вбудованому елементі є розрив рядка.
Також зауважте, що не всі властивості можна використовувати в наборі правил, що містить ::first-line. В основному:
.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:… )Офіційна специфікація CSS повідомляє Користувальницькі агенти можуть дозволити інші властивості, якщо їм хочеться:
UA можуть застосовувати й інші властивості.
Слово щодо конкретності
Наступна демонстрація демонструє, як ::first-lineможна замінити будь-яку специфіку, навіть !important.
- Перший абзац встановлюється сірим через селектор тегів
- Другий абзац встановлюється сірим через селектор класу
- Для третього абзацу встановлено сірий колір через селектор ID
- Четвертий абзац ставиться сірим через! Важливий баш
Це пов’язано з тим, що псевдоелемент розглядається як дочірній елемент, а не просто як частина батьківського елемента. Тож правила, які ви застосовуєте до нього, призначені саме для нього, батьківські правила можуть просто каскадуватися до нього.
Також спробуйте змінити розмір браузера, щоб побачити, як поводиться псевдоелемент при зміні ширини області перегляду.
Немає: last-line або: nth-line, хоча це було б круто.
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Так | Так | Так | 3,5+ (старі) 9+ | 5,5+ (старі) 9+ | Так | Так |
Оскільки ::first-lineце псевдоелемент, він повинен мати префікс двома двокрапками, як зазначено в CSS2.1. Однак деякі браузери підтримують лише синтаксис із двокрапками (Internet Explorer 5.5 - 9 та Opera 3.5 - 9).