to kombinator sąsiedniego rodzeństwa. h2 + p pasuje do , który następuje bezpośrednio po z tym samym rodzicem. ~ jest luźniejszy: h2 ~ p pasuje do każdego późniejszego z rodzeństwa.

Dokumentacja CSS z przykładami: Selektory

Q: Czym jest selektor CSS?

To część reguły CSS przed {, która mówi, do których elementów stosują się deklaracje. W p.note { color: blue; } selektor p.note pasuje do każdego z klasą note.

Q: Czym różni się spacja od > w selektorze CSS?

Spacja to kombinator potomka: nav a pasuje do każdego linku w dowolnym miejscu wewnątrz nav, na dowolnej głębokości. > to kombinator dziecka: nav > a pasuje tylko do linków, których bezpośrednim rodzicem jest nav.

Q: Jak wybierać elementy według atrybutu w CSS?

Umieść atrybut w nawiasach kwadratowych: [disabled] pasuje do elementów, które go mają, [type="email"] do dokładnej wartości, [href^="https"] do wartości zaczynającej się od ciągu znaków, [href$=".pdf"] do takiej, która się nim kończy, a [class*="btn"] do takiej, która go zawiera.

Q: Czy CSS może wybrać element rodzica?

Tak, za pomocą pseudoklasy :has(), obsługiwanej w aktualnych wersjach Chrome, Firefoksa i Safari. li:has(> a.active) pasuje do elementów listy, które bezpośrednio zawierają aktywny link.

Czym jest selektor CSS

Selektor to część reguły przed nawiasami klamrowymi. Decyduje, do których elementów stosują się deklaracje.

p.note { color: #2563eb; }
/* selector: p.note    declaration: color: #2563eb */

Pięć podstawowych selektorów wystarcza w większości prawdziwych arkuszy stylów:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic selectors</title>
  <style>
    * { box-sizing: border-box; }           /* universal: every element */
    p { margin: 6px 0; }                    /* type: every <p> */
    .tip { background: #e5e7eb; padding: 6px; } /* class */
    #main-title { color: #2563eb; }         /* ID: one element */
    h2, .lead { font-style: italic; }       /* group: either one */
  </style>
</head>
<body>
  <h1 id="main-title">Selectors</h1>
  <p class="lead">A lead paragraph (grouped with h2).</p>
  <p class="tip">A tip, matched by .tip</p>
  <h2>A subheading</h2>
  <p>A plain paragraph.</p>
</body>
</html>

Rodzaje selektorów w skrócie

Selektor	Przykład	Pasuje do
Uniwersalny	`*`	Każdego elementu
Typu	`p`	Każdego `<p>`
Klasy	`.tip`	Elementów z `class="tip"` (między innymi)
ID	`#main-title`	Elementu z `id="main-title"`
Atrybutu	`[type="email"]`	Elementów, których atrybut pasuje
Pseudoklasa	`a:hover`, `li:first-child`	Elementów w danym stanie lub pozycji
Pseudoelement	`p::first-line`, `.x::before`	Części elementu
Grupa	`h1, h2, h3`	Wszystkiego, co pasuje do jednego z listy
Złożony	`p.tip`	`<p>`, który ma też tę klasę

Klasy i ID mają własną stronę, selektor klasy CSS. Pseudoklasy, takie jak :nth-child() i :not(), omawia strona o pseudoklasach.

Kombinatory: potomek a dziecko

Kombinator łączy dwa selektory według ich relacji w drzewie HTML. Są cztery.

Kombinator	Składnia	Pasuje do `B`, gdy
Potomka	`A B` (spacja)	B jest gdziekolwiek wewnątrz A
Dziecka	`A > B`	Rodzicem B jest A
Sąsiedniego rodzeństwa	`A + B`	B następuje zaraz po A, z tym samym rodzicem
Ogólnego rodzeństwa	`A ~ B`	B następuje gdzieś po A, z tym samym rodzicem

Spacja i > to para, którą najczęściej się myli. Selektor potomka sięga na dowolną głębokość; selektor dziecka zatrzymuje się na jednym poziomie:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Child selector</title>
  <style>
    li { padding: 2px 6px; margin: 2px 0; }
    .all li { background: #e5e7eb; }          /* descendant: every level */
    .direct > li { border-inline-start: 4px solid #2563eb; } /* child: top level only */
  </style>
</head>
<body>
  <ul class="all direct">
    <li>Top level: gray and blue edge</li>
    <li>Top level: gray and blue edge
      <ul>
        <li>Nested: gray only</li>
        <li>Nested: gray only</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Kombinatory rodzeństwa: + i ~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Siblings</title>
  <style>
    p { margin: 4px 0; padding: 4px 8px; }
    h2 + p { background: #f59e0b; }   /* only the first p after h2 */
    h2 ~ p { color: #2563eb; }        /* every p after h2 */
  </style>
</head>
<body>
  <p>Before the heading: untouched.</p>
  <h2>Heading</h2>
  <p>Right after h2: amber and blue.</p>
  <p>Later sibling: blue only.</p>
  <p>Later sibling: blue only.</p>
</body>
</html>

Rodzeństwo patrzy tylko do przodu. Nie ma kombinatora "poprzedniego rodzeństwa", choć da się to wyrazić przez :has(): h2:has(+ p) pasuje do h2, po którym bezpośrednio następuje p.

Selektory atrybutów

Nawiasy kwadratowe dopasowują atrybuty i ich wartości:

Selektor	Pasuje, gdy
`[disabled]`	Ma atrybut, z dowolną wartością
`[type="email"]`	Wartość to dokładnie `email`
`[href^="https"]`	Wartość zaczyna się od `https`
`[href$=".pdf"]`	Wartość kończy się na `.pdf`
`[class*="icon"]`	Wartość zawiera gdziekolwiek `icon`
`[lang\|="en"]`	Wartość to `en` lub zaczyna się od `en-`
`[data-state="open" i]`	Dokładne dopasowanie, bez rozróżniania wielkości liter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attribute selectors</title>
  <style>
    a { display: block; margin: 4px 0; }
    a[href^="https"] { color: #16a34a; }
    a[href$=".pdf"] { font-weight: bold; }
    a[href$=".pdf"]::after { content: " (PDF)"; }
    input[type="email"] { border: 2px solid #2563eb; }
    [data-state="open"] { background: #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <a href="https://example.com">External, https: green</a>
  <a href="/guide.pdf">Guide, bold with a label</a>
  <a href="/about">Relative link: untouched</a>
  <input type="email" placeholder="Email: blue border">
  <div data-state="open">data-state="open"</div>
</body>
</html>

Selektory atrybutów na atrybutach data-* to czysty sposób na stylizowanie stanu ustawianego przez JavaScript, bez wymyślania nazw klas.

Wypróbuj dowolny selektor

Wpisz selektor w pole. Każdy pasujący element dostaje bursztynowy kontur, a poniżej pojawia się ich liczba.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selector tester</title>
  <style>
    .hit { outline: 3px solid #f59e0b; }
    #demo { border: 1px solid #e5e7eb; padding: 8px; margin-top: 8px; }
    #demo * { margin: 4px 0; }
  </style>
</head>
<body>
  <input id="sel" value="#demo li:nth-child(2)" size="30">
  <span id="out"></span>
  <div id="demo">
    <h2 class="title">Title</h2>
    <p class="intro">Intro <a href="/a">link</a></p>
    <ul>
      <li>One</li>
      <li class="active">Two</li>
      <li>Three <a href="https://example.com">external</a></li>
    </ul>
  </div>
  <script>
    const sel = document.getElementById('sel');
    const out = document.getElementById('out');
    const run = () => {
      document.querySelectorAll('.hit').forEach((el) => el.classList.remove('hit'));
      try {
        const found = document.querySelectorAll(sel.value);
        found.forEach((el) => el.classList.add('hit'));
        out.textContent = found.length + ' match(es)';
      } catch (e) {
        out.textContent = 'Invalid selector';
      }
    };
    sel.addEventListener('input', run);
    run();
  </script>
</body>
</html>

Wypróbuj #demo a, ul > li, h2 ~ *, a[href^="https"], li:not(.active).

Złożony a potomka: spacja ma znaczenie

p.note i p .note różnią się jedną spacją i znaczą co innego.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space matters</title>
  <style>
    p.note { background: #e5e7eb; }      /* a p that has .note */
    p .note { color: #16a34a; font-weight: bold; } /* a .note inside a p */
  </style>
</head>
<body>
  <p class="note">p.note: gray background</p>
  <p>Plain p with a <span class="note">span.note inside</span></p>
</body>
</html>

Jak przeglądarki czytają selektory

Gdy kilka reguł pasuje do tego samego elementu i ustawia tę samą właściwość, wygrywa bardziej specyficzny selektor, a przy remisie późniejszy. ID waży więcej niż dowolna liczba klas, a klasa więcej niż dowolna liczba selektorów typu; strona o !important zawiera pełną tabelę specyficzności.

Grupa ma jeden haczyk: jeśli którykolwiek selektor na zwykłej liście jest nieprawidłowy, cała reguła przepada. W a, b:unknown { } nie zostaną ostylowane nawet linki. Otoczenie listy przez :is() czyni ją wyrozumiałą, więc :is(a, b:unknown) nadal stylizuje linki.

Częste błędy

Brak kropki lub krzyżyka. tip { } celuje w element <tip>, a nie w class="tip". Pisz .tip.
Spacja w selektorze złożonym. p .note to nie p.note.
Oczekiwanie, że > sięgnie do wnuków. Dla dowolnej głębokości użyj spacji.
Jedna literówka psuje całą grupę. W h1, h2:hovr, h3 nic nie zostaje ostylowane.
Zbyt długie selektory. body div.wrapper ul li a trudno się czyta i trudno go nadpisać. Zwykle wystarczy jedna klasa.

Najczęściej zadawane pytania

Czym jest selektor CSS?

To część reguły CSS przed {, która mówi, do których elementów stosują się deklaracje. W p.note { color: blue; } selektor p.note pasuje do każdego <p> z klasą note.

Czym różni się spacja od > w selektorze CSS?

Spacja to kombinator potomka: nav a pasuje do każdego linku w dowolnym miejscu wewnątrz nav, na dowolnej głębokości. > to kombinator dziecka: nav > a pasuje tylko do linków, których bezpośrednim rodzicem jest nav.

Co oznacza + w CSS?

+ to kombinator sąsiedniego rodzeństwa. h2 + p pasuje do <p>, który następuje bezpośrednio po <h2> z tym samym rodzicem. ~ jest luźniejszy: h2 ~ p pasuje do każdego późniejszego <p> z rodzeństwa.

Jak wybierać elementy według atrybutu w CSS?

Umieść atrybut w nawiasach kwadratowych: [disabled] pasuje do elementów, które go mają, [type="email"] do dokładnej wartości, [href^="https"] do wartości zaczynającej się od ciągu znaków, [href$=".pdf"] do takiej, która się nim kończy, a [class*="btn"] do takiej, która go zawiera.

Czy CSS może wybrać element rodzica?

Tak, za pomocą pseudoklasy :has(), obsługiwanej w aktualnych wersjach Chrome, Firefoksa i Safari. li:has(> a.active) pasuje do elementów listy, które bezpośrednio zawierają aktywny link.

Powiązane zagadnienia