Dokumentacja CSS z przykładami: Pseudoklasy

Q: Jak działa nth-child w CSS?

:nth-child(an+b) pasuje do elementów, których pozycja wśród rodzeństwa wynosi a×n+b dla n = 0, 1, 2 i tak dalej, licząc od 1. :nth-child(3) to trzecie dziecko, :nth-child(odd) albo 2n+1 każde nieparzyste, a :nth-child(n+4) czwarte i kolejne.

Q: Czym różni się nth-child od nth-of-type?

:nth-child() liczy wszystkie elementy rodzeństwa, a potem sprawdza resztę selektora; :nth-of-type() liczy tylko rodzeństwo tego samego typu elementu. W liście złożonej z h2 i następujących po nim akapitów p:nth-child(1) nie pasuje do niczego, a p:nth-of-type(1) pasuje do pierwszego akapitu.

Q: Jak używać :not() w CSS?

W nawiasach umieść selektor do wykluczenia: li:not(.done) pasuje do każdego elementu listy bez klasy done. Przyjmuje też listę, input:not([type="checkbox"], [type="radio"]).

Q: Czym różni się pseudoklasa od pseudoelementu?

Pseudoklasa (jeden dwukropek, :hover) wybiera cały istniejący element w jakimś stanie. Pseudoelement (dwa dwukropki, ::before) celuje w część elementu albo tworzy generowaną treść.

Czym jest pseudoklasa

Pseudoklasa to słowo kluczowe po dwukropku, które wybiera elementy według ich pozycji w dokumencie albo ich stanu. Dołączasz ją do zwykłego selektora: li:first-child, input:focus, a:hover.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pseudo-classes</title>
  <style>
    li { padding: 6px 10px; list-style: none; }
    li:nth-child(odd) { background: #e5e7eb; }       /* zebra stripes */
    li:first-child { font-weight: bold; }
    li:last-child { color: #2563eb; }
    li:not(.done) { border-inline-start: 4px solid #f59e0b; }
  </style>
</head>
<body>
  <ul>
    <li>First child: bold</li>
    <li class="done">Done: no amber edge</li>
    <li>Odd rows are gray</li>
    <li class="done">Done</li>
    <li>Last child: blue</li>
  </ul>
</body>
</html>

Pseudoklasy stanu dla linków i myszy (:hover, :active, :visited) mają własną stronę, CSS hover.

:nth-child() i wzór an+b

:nth-child() przyjmuje liczbę, słowo kluczowe albo wzór an+b. Przeglądarka sprawdza n = 0, 1, 2, ... i dopasowuje każdą pozycję, którą daje wzór (pozycje zaczynają się od 1).

Wzór	Pasujące pozycje	Znaczenie
`3`	3	Trzecie dziecko
`odd` lub `2n+1`	1, 3, 5, ...	Nieparzyste wiersze
`even` lub `2n`	2, 4, 6, ...	Parzyste wiersze
`3n`	3, 6, 9, ...	Co trzecie
`n+4`	4, 5, 6, ...	Czwarte i kolejne
`-n+3`	1, 2, 3	Pierwsze trzy
`3n+1`	1, 4, 7, ...	Co trzecie, zaczynając od pierwszego

Wpisz wzór i obserwuj, które elementy pasują:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child tester</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 6px; padding: 0; }
    .grid li {
      list-style: none;
      height: 40px;
      display: grid;
      place-items: center;
      background: #e5e7eb;
      border-radius: 6px;
    }
  </style>
  <style id="live"></style>
</head>
<body>
  <label>li:nth-child( <input id="f" value="3n+1" size="8"> )</label>
  <ul class="grid" id="grid"></ul>
  <script>
    const grid = document.getElementById('grid');
    for (let i = 1; i <= 18; i++) grid.innerHTML += '<li>' + i + '</li>';
    const input = document.getElementById('f');
    const update = () => {
      document.getElementById('live').textContent =
        '.grid li:nth-child(' + input.value + ') { background: #2563eb; color: white; }';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Wypróbuj odd, even, 4, n+7, -n+5 i 2n+3. Nieprawidłowy wzór nie pasuje do niczego.

Bliźniak liczący od końca to :nth-last-child(): li:nth-last-child(-n+2) wybiera dwa ostatnie elementy.

nth-child kontra nth-of-type

:nth-child() liczy każdy element rodzeństwa, bez względu na znacznik, i dopiero potem sprawdza resztę selektora. :nth-of-type() liczy tylko rodzeństwo z tym samym znacznikiem. Różnicę widać, gdy tylko rodzeństwo jest wymieszane:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-of-type</title>
  <style>
    p, h2 { margin: 4px 0; padding: 4px 8px; }
    p:nth-child(2) { background: #f59e0b; }   /* 2nd child AND a p */
    p:nth-of-type(2) { color: #2563eb; font-weight: bold; } /* 2nd p */
  </style>
</head>
<body>
  <h2>Heading (child 1)</h2>
  <p>Paragraph 1, child 2: amber</p>
  <p>Paragraph 2, child 3: blue and bold</p>
  <p>Paragraph 3, child 4</p>
</body>
</html>

Te same pary istnieją dla końców: :first-child / :first-of-type, :last-child / :last-of-type, :only-child / :only-of-type.

:not(), :is() i :where()

Pseudoklasa	Przykład	Pasuje do
`:not(X)`	`li:not(.done)`	Elementów, które nie pasują do X
`:is(X, Y)`	`:is(h1, h2, h3) a`	Elementów pasujących do czegokolwiek z listy
`:where(X, Y)`	`:where(ul, ol) li`	Tak samo jak `:is()`, ze specyficznością zero
`:has(X)`	`li:has(> input:checked)`	Elementów, które zawierają coś pasującego do X

:not() używa się na co dzień, na przykład żeby postawić separator między elementami, ale nie po ostatnim:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not</title>
  <style>
    .tags { padding: 0; }
    .tags li { display: inline; list-style: none; }
    .tags li:not(:last-child)::after { content: " · "; color: #2563eb; }
    input:not([type="checkbox"]) { border: 2px solid #16a34a; }
  </style>
</head>
<body>
  <ul class="tags"><li>html</li><li>css</li><li>js</li></ul>
  <input type="text" placeholder="Text: green border">
  <input type="checkbox" aria-label="Checkbox, default border">
</body>
</html>

Pseudoklasy stanu: focus, checked, disabled, invalid

Pseudoklasa	Pasuje do
`:focus`	Elementu, który ma fokus z klawiatury lub myszy
`:focus-visible`	Elementu z fokusem, gdy przeglądarka uzna, że należy pokazać obwódkę (zwykle przy fokusie z klawiatury)
`:focus-within`	Elementu, który zawiera element z fokusem
`:checked`	Zaznaczonego pola wyboru, przycisku radio lub wybranego `<option>`
`:disabled` / `:enabled`	Kontrolek formularza, które są (lub nie są) wyłączone
`:required` / `:optional`	Pól z `required` lub bez
`:invalid` / `:valid`	Pól, których wartość nie przechodzi lub przechodzi walidację
`:user-invalid`	Nieprawidłowych pól, ale dopiero po interakcji użytkownika
`:placeholder-shown`	Pola, które właśnie pokazuje swój placeholder
`:empty`	Elementu bez dzieci, nawet bez tekstu
`:target`	Elementu, którego id pasuje do `#fragment` w adresie URL

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>States</title>
  <style>
    input { padding: 6px; border: 2px solid #e5e7eb; border-radius: 6px; outline: none; }
    input:focus-visible { border-color: #2563eb; }
    input:user-invalid { border-color: #f59e0b; }
    .field:focus-within label { color: #2563eb; }
    input:checked + label { text-decoration: line-through; color: #16a34a; }
    button:disabled { opacity: 0.4; }
  </style>
</head>
<body>
  <p class="field">
    <label for="mail">Email</label>
    <input id="mail" type="email" required placeholder="you@example.com">
  </p>
  <p>
    <input type="checkbox" id="task" checked>
    <label for="task">Checked task</label>
  </p>
  <button disabled>Disabled button</button>
</body>
</html>

Kliknij w pole e-mail: jego etykieta zmienia kolor na niebieski dzięki :focus-within. Wpisz coś, co nie jest adresem e-mail, i opuść pole: :user-invalid zmienia obramowanie na bursztynowe. Zwykłe :invalid oznaczyłoby puste wymagane pole na bursztynowo, zanim w ogóle go dotkniesz.

Cokolwiek robisz z :focus, zachowaj widoczny styl fokusu. Usunięcie obwódki bez zamiennika sprawia, że osoby korzystające z klawiatury nie widzą, gdzie są.

:has(), selektor rodzica

:has() dopasowuje element według tego, co zawiera. To długo wyczekiwany "selektor rodzica", który działa w aktualnych wersjach Chrome, Firefoksa i Safari.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has</title>
  <style>
    .option { display: block; border: 2px solid #e5e7eb; padding: 8px; margin: 6px 0; border-radius: 6px; }
    .option:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <label class="option"><input type="radio" name="plan" checked> Monthly</label>
  <label class="option"><input type="radio" name="plan"> Yearly</label>
</body>
</html>

Wybierz drugi plan: cała karta podąża za przyciskiem radio, bez JavaScriptu.

Częste błędy

Spacja przed dwukropkiem. li :first-child oznacza "pierwsze dziecko wewnątrz li". Pisz li:first-child.
Oczekiwanie, że p:nth-child(1) oznacza "pierwszy p". Oznacza "pierwsze dziecko, jeśli jest p". Dla pierwszego p użyj :first-of-type.
Liczenie od 0. Pozycje zaczynają się od 1: :nth-child(0) nie pasuje do niczego.
Usuwanie obwódek fokusu. :focus { outline: none } bez zamiennika psuje nawigację z klawiatury.
Mylenie : i ::. :before to stary zapis pseudoelementu ::before; pseudoklasy zawsze mają jeden dwukropek.

Najczęściej zadawane pytania

Czym jest pseudoklasa w CSS?

To słowo kluczowe po dwukropku, które wybiera elementy według stanu lub pozycji, a nie nazwy, na przykład a:hover, li:first-child albo input:focus. Dodaje się ją do zwykłego selektora, a większość pseudoklas liczy się w specyficzności jak klasa (:where() liczy się jako zero).

Jak działa nth-child w CSS?

:nth-child(an+b) pasuje do elementów, których pozycja wśród rodzeństwa wynosi a×n+b dla n = 0, 1, 2 i tak dalej, licząc od 1. :nth-child(3) to trzecie dziecko, :nth-child(odd) albo 2n+1 każde nieparzyste, a :nth-child(n+4) czwarte i kolejne.

Czym różni się nth-child od nth-of-type?

:nth-child() liczy wszystkie elementy rodzeństwa, a potem sprawdza resztę selektora; :nth-of-type() liczy tylko rodzeństwo tego samego typu elementu. W liście złożonej z h2 i następujących po nim akapitów p:nth-child(1) nie pasuje do niczego, a p:nth-of-type(1) pasuje do pierwszego akapitu.

Jak używać :not() w CSS?

W nawiasach umieść selektor do wykluczenia: li:not(.done) pasuje do każdego elementu listy bez klasy done. Przyjmuje też listę, input:not([type="checkbox"], [type="radio"]).

Czym różni się pseudoklasa od pseudoelementu?

Pseudoklasa (jeden dwukropek, :hover) wybiera cały istniejący element w jakimś stanie. Pseudoelement (dwa dwukropki, ::before) celuje w część elementu albo tworzy generowaną treść.

Powiązane zagadnienia