:: први ред - ЦСС-трикови

Anonim

::first-lineПсеудо-елеменат је за примену стилова на првој линији елемента. Замислите одломак дугачак неколико редова (попут овог!). ::first-lineомогућава вам обликовање првог реда текста. Можете га користити за повећање или га поставити у мале капице као стилски избор. Количина текста који циља овај псеудо-елемент зависи од неколико фактора као што су дужина реда, ширина оквира за приказ, величина фонта, размак између слова, размак између речи. Чим се линија преломи, текст после тога више није одабран. Имајте на уму да овде није одабран стварни ДОМ елемент (дакле „псеудо“ елемент).

Овај псеудо-елемент ради само о елементима блоцк нивоу (када се 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:… )

Званична ЦСС спецификација говори да Кориснички агенти могу да дозволе друга својства ако им се прохте:

УА могу применити и друга својства.

Реч у вези са специфичношћу

Следећи демо показује како ::first-lineје у стању да замени било коју врсту специфичности, чак !important.

  • 1. параграф је постављен на сиву боју помоћу бирача ознака
  • 2. параграф је постављен на сиво кроз бирач класе
  • Трећи параграф је постављен на сиву боју помоћу бирача ИД
  • Четврти параграф постављен је на сиво кроз! Важан басх
Погледајте ову оловку!

То је зато што се псеудо-елемент третира као подређени елемент, а не само као део надређеног елемента. Дакле, правила која на њих примените су само за то, надређена правила се могу само каскадно применити на њих.

Такође, покушајте да промените величину прегледача да бисте видели како се понаша псеудо-елемент када се промени ширина оквира за приказ.

Не постоји: ласт-лине или: нтх-лине, иако би то било у реду.

Подршка прегледача

Хром Сафари Фирефок Опера ИЕ Андроид иОС
Да Да Да 3,5+ (стари)
9+
5,5+ (старо)
9+
Да Да

Будући да ::first-lineје псеудо-елемент, префиксу би требало да му буду два двотачке како је наведено у ЦСС2.1. Међутим, неки прегледачи подржавају само синтаксу са једним двотачком (Интернет Екплорер 5.5 - 9 и Опера 3.5 - 9).