Selektory#

Pseudoelement pierwszej linii#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
::first-line { /* deklaracje */ }

Pseudoelement ::first-line ma zastosowanie do zawartości pierwszej sformatowanej linii w elemencie.

Poniższa reguła zmienia wielkość liter pierwszych linii we wszystkich akapitach:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
p::first-line {text-transform: uppercase;}

Selektor p::first-line nie dopasowuje żadnego rzeczywistego elementu w dokumencie. Wskazuje jedynie na pseudoelement, który w zgodnych aplikacjach klienckich byłby wstawiany na początku wszystkich akapitów.

Należy mieć świadomość tego, że długość pierwszej linii zależy od wielu czynników, włącznie z bieżącą szerokością strony, rozmiarem czcionki, itd. Zatem najzwyklejszy akapit w postaci:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<p>This is a somewhat long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</p>

może zawierać linie przełamane w następujący sposób:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<p>THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be identified by a fictional tag
sequence. The other lines will be treated as
ordinary lines in the paragraph.</p>

Akapit ten może zostać "przekształcony" przez aplikacje klienckie w taki sposób, jak gdyby zawierał sekwencję fikcyjnych znaczników # (fictional tag sequence) dla pseudoelementu ::first-line. Sekwencja fikcyjnych znaczników pozwala zobrazować, w jaki sposób przebiega rzeczywiste dziedziczenie właściwości:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<p><p::first-line> This is a somewhat long HTML
paragraph that </p::first-line> will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</p>

Jeśli pseudoelement przełamuje rzeczywisty element, to sytuację taką można wyrazić za pomocą sekwencji fikcyjnych znaczników, która zamyka i ponownie otwiera rzeczywisty element. Zatem, jeśli w poprzednim akapicie umieścimy element span w następujący sposób:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<p><span class="test"> This is a somewhat long HTML
paragraph that will be broken into several
lines.</span> The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</p>

to aplikacja kliencka może symulować początkowe i końcowe znaczniki dla elementu span w chwili, kiedy dołącza sekwencję fikcyjnych znaczników dla pseudoelementu ::first-line:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<p><p::first-line><span class="test"> This is a
somewhat long HTML
paragraph that will </span></p::first-line><span class="test"> be
broken into several
lines.</span> The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</p>

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>

	<style>

		::first-line {color: red;}
		#p2 {width: 50%;}
		#p3 {width: 25%;}
		#s1 {font-weight: bold;}

	</style>

</head>

<body>

	<p>This is a somewhat long HTML paragraph that will be broken
	into several lines. The first line will be identified by a fictional tag
	sequence. The other lines will be treated as ordinary lines in the paragraph.</p>

	<p id="p2">This is a somewhat long HTML paragraph that will be broken
	into several lines. The first line will be identified by a fictional tag
	sequence. The other lines will be treated as ordinary lines in the paragraph.</p>

	<p id="p3"><span id="s1">This is a somewhat long HTML paragraph that will be broken
	into several lines</span>. The first line will be identified by a fictional tag
	sequence. The other lines will be treated as ordinary lines in the paragraph.</p>

</body>

</html>

Definicja pierwszej sformatowanej linii w CSS#

Pseudoelement ::first-line może generować efekt jedynie wtedy, kiedy został dołączony do kontenerów o blokowym charakterze wyświetlania, jak np. elementów z typem wyświetlania: block, inline-block, table-caption lub table-cell.

Pierwsza sformatowana linia (first formatted line) elementu może wystąpić wewnątrz blokowego potomka o tym samym przepływie (tzn. w blokowym potomku, który nie znajduje się na zewnątrz przepływu, np. ze względu na zmianę oblewania lub pozycjonowania). Dla przykładu, pierwsza linia elementu div w następującej strukturze:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<div>
	<p>This line...</p>
</div>

jest pierwszą linią w elemencie p (przy założeniu, że zarówno p jak i div są wyświetlane blokowo).

Pierwsza linia w elementach o typie wyświetlania table-cell lub inline-block nie może być pierwszą sformatowaną linią swego przodka. W następującej strukturze:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<div>
	<p style="display: inline-block;">Hello<br>Goodbye</p>
	etcetera
</div>

pierwszą sformatowaną linią dla elementu div nie jest linia "Hello".

Warto podkreślić, że pierwsza linia elementu p w poniższym fragmencie:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<p><br>First...</p>

nie zawiera żadnych liter (zakładający, że stosowany jest domyślny styl do elementu br). Słowo "First" nie jest pierwszą sformatowaną linią.

Aplikacje klienckie powinny działać tak, jak gdyby sekwencje fikcyjnych znaczników dla pseudoelementów ::first-line były zagnieżdżone tylko w najgłębiej położonym zawierającym elemencie blokowym. Ponieważ w specyfikacjach CSS1 i CSS2 nie napisano nic na ten temat, autorzy nie powinni do końca polegać na tym zachowaniu. Dla przykładu, w następującej strukturze:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<div>
	<p>First paragraph</p>
	<p>Second paragraph</p>
</div>

sekwencja fikcyjnych znaczników jest następująca:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<div>
	<p><div::first-line><p::first-line>First paragraph</p::first-line></div::first-line></p>
	<p><p::first-line>Second paragraph</p::first-line></p>
</div>

Pseudoelement ::first-line jest bardzo podobny do elementów z liniowym charakterem wyświetlania, aczkolwiek zawiera pewne ograniczenia. Jedynymi właściwościami CSS stosowanymi do pseudoelementu są: właściwości czcionki, kolory, właściwości tła, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height. Tak czy inaczej aplikacje klienckie mogą aplikować kolejne właściwości.

Podczas dziedziczenia CSS część rzeczywistego elementu, który jest dzieckiem występującym w pierwszej linii, dziedziczy jedynie właściwości stosowane do pseudoelementu ::first-line z pseudoelementu ::first-line. Dla wszystkich innych właściwości dziedziczenie odbywa się od rodzica niebędącego pseudoelementem. Część rzeczywistego elementu, która nie występuje w pierwszej linii, zawsze dziedziczy ze swojego rodzica.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>

	<style>

		div {border: 5px solid green; margin-top: 5px;}

		.block::first-line {color: blue;}
		.block p::first-line {font-weight: bold;}

		.block2 {width: 270px;}
		.block2::first-line {color: blue;}
		.block2 span {font-weight: bold;}

	</style>

</head>

<body>

	<p>Zmiana szerokości okna może wpływać na działanie poniższych przykładów!</p>

	<div class="block">
		<p>Pierwsza linia bloku i akapitu jednocześnie (niebieska i pogrubiona).</p>
		<p>Pierwsza linia akapitu (pogrubiona).</p>
	</div>

	<div class="block">Pierwsza linia bloku (niebieska)
		<p>Pierwsza linia akapitu (pogrubiona).</p>
		<p>Pierwsza linia akapitu (pogrubiona).</p>
	</div>

	<div class="block">Pierwsza linia bloku (niebieska)
		<p style="display: inline-block;">
			Pierwsza linia akapitu typu inline-block (pogrubiona)<br>
			Dalsza treść akapitu za elementem BR (brak pogrubienia)
		</p>
		wciąż pierwsza linia bloku (niebieska).<br>
		To już prawdopodobnie będzie druga linia bloku.
	</div>

	<div class="block">
		<br>
		Treść bloku za elementem BR. Pierwsza linia bloku nie zawiera żadnych znaków (to nie jest pierwsza linia).
	</div>

	<div class="block2">Blok blok blok blok blok <span>span span span span span</span> blok blok blok blok blok</div>

</body>

</html>

Warto dokładniej przeanalizować powyższe przykłady. Każda aktualna przeglądarka ma pewne problemy z prawidłową interpretacją pseudoelementu ::first-line.

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Pseudoelement pierwszej linii (H2) Definicja pierwszej sformatowanej linii w CSS (H3) Specyfikacje i inne materiały (H3)