Selektory#

Pseudokalsa n-tej kolumny (normalna kolejność)#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:nth-column(An+B) { /* deklaracje */ }

Pseudoklasa :nth-column() reprezentuje elementy komórek, które znajdują się w pośredniej relacji z elementami kolumn, zgodnie z cyklem określanym przez argument. Argumentem może być pojedyncza notacja An+B. Pseudoklasa indeksuje elementy w normalnej kolejności.

Przynależność do kolumn jest określana tylko i wyłącznie na podstawie semantyki języka dokumentu: czy i w jaki sposób elementy będą prezentowane nie ma żadnego znaczenia. Jeśli element komórki należy do więcej niż jednej kolumny, to jest reprezentowany przez selektor wskazujący na przynależność do każdej takiej kolumny.

Poniższe selektory wybierają elementy komórek z kolumn dowolnego typu, z zachowaniem odpowiedniego cyklu względem kolumn:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
:nth-column(n)		/* każda kolejna kolumna */
:nth-column(2n)		/* co druga kolumna */
:nth-column(2n+1)	/* nieparzyste kolumny */
:nth-column(5n+3)	/* co piąta kolumna zaczynając od trzeciej */

Oczywiście całość można odpowiednio zawęzić. Następujący selektor wybiera parzyste elementy kolumn, które zostały określane przez element col z klasą step:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
col.step:nth-column(even)

Trzeba dobrze zrozumieć powyższy zapis. Wszystkie kolumny w danej grupie kolumn podlegają indeksowaniu (każda grupa kolumn osobno), ale wybierane będą tylko te kolumny, które opisane zostały przez element col z klasą step i mające parzystą wartość:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<table border="1">

	<col span="1">					<!-- Wybieramy pierwszą kolumnę (A) -->
	<col span="4" class="step">		<!-- Wybieramy cztery kolejne kolumny (B, C, D, E) -->

	<tr>
		<td>A1</td>		<!-- Indeks 1 (Komórka z grupy kolumn span="1") -->
		<td>B1</td>		<!-- Indeks 1 (Komórka z grupy kolumn "step") -->
		<td>C1</td>		<!-- Indeks 2 (Komórka z grupy kolumn "step", wybrano) -->
		<td>D1</td>		<!-- Indeks 3 (Komórka z grupy kolumn "step") -->
		<td>E1</td>		<!-- Indeks 4 (Komórka z grupy kolumn "step", wybrano) -->
		<td>F1</td>
	</tr>

	<tr>
		<td>A2</td>		<!-- Indeks 1 (Komórka z grupy kolumn span="1") -->
		<td>B2</td>		<!-- Indeks 1 (Komórka z grupy kolumn "step") -->
		<td>C2</td>		<!-- Indeks 2 (Komórka z grupy kolumn "step", wybrano) -->
		<td>D2</td>		<!-- Indeks 3 (Komórka z grupy kolumn "step") -->
		<td>E2</td>		<!-- Indeks 4 (Komórka z grupy kolumn "step", wybrano) -->
		<td>F2</td>
	</tr>

</table>

Wszystkie najważniejsze kwestie związane z pseudoklasami indeksowania opisałem przy omawianiu mikroskładni An+B (koniecznie przeczytaj).

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>

		:nth-column(2n+1) {background-color: yellow;}
		col:nth-column(even) {color: red;}

	</style>

</head>

<body>

	<table border="1">

		<colgroup span="2"></colgroup>	<!-- Wybieramy dwie pierwsze kolumny (A, B) -->
		<colgroup>
			<col span="1">		<!-- Wybieramy trzecią kolumnę (C) -->
			<col span="4">		<!-- Wybieramy cztery kolejne kolumny (D, E, F, G) -->
		</colgroup>

		<tr>
			<td>A1</td>		<!-- Indeks 1 (Komórka z colgroup span="2") -->
			<td>B1</td>		<!-- Indeks 2 (Komórka z colgroup span="2") -->
			<td>C1</td>		<!-- Indeks 1 (Komórka z col span="1") -->
			<td>D1</td>		<!-- Indeks 1 (Komórka z col span="4") -->
			<td>E1</td>		<!-- Indeks 2 (Komórka z col span="4") -->
			<td>F1</td>		<!-- Indeks 3 (Komórka z col span="4") -->
			<td>G1</td>		<!-- Indeks 4 (Komórka z col span="4") -->
			<td>H1</td>
			<td>I1</td>
		</tr>

		<tr>
			<td>A2</td>		<!-- Indeks 1 (Komórka z colgroup span="2") -->
			<td>B2</td>		<!-- Indeks 2 (Komórka z colgroup span="2") -->
			<td>C2</td>		<!-- Indeks 1 (Komórka z col span="1") -->
			<td>D2</td>		<!-- Indeks 1 (Komórka z col span="4") -->
			<td>E2</td>		<!-- Indeks 2 (Komórka z col span="4") -->
			<td>F2</td>		<!-- Indeks 3 (Komórka z col span="4") -->
			<td>G2</td>		<!-- Indeks 4 (Komórka z col span="4") -->
			<td>H2</td>
			<td>I2</td>
		</tr>

	</table>

</body>

</html>

Na chwilę obecną żadna aktualna przeglądarka nie obsługuje pseudoklasy :nth-column().

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Selektory (H1) Pseudokalsa n-tej kolumny (normalna kolejność) (H2) Specyfikacje i inne materiały (H3)