8. Zaawansowane selektory i pseudo-elementy

Zaawansowane selektory pozwalają precyzyjnie targetować elementy, a pseudo-elementy dodają wirtualne treści.

Dlaczego to ważne?

Umożliwiają złożone stylowanie bez dodatkowego HTML. W 2026: nowe selektory jak :has() i :where() upraszczają logikę.

Zaawansowane selektory

/* Kombinatory */
div + p { margin-top: 0; } /* p bezpośrednio po div */
ul ~ li { color: gray; } /* li po ul (nie bezpośrednie) */
a[href^='https'] { color: green; } /* href zaczyna się od https */
input[type='text']:focus { border-color: #0d6efd; }

/* Nowe selektory */
li:nth-child(odd) { background: #f8f9fa; } /* nieparzyste */
p:has(strong) { font-weight: bold; } /* p zawierające strong */
:where(.class) { color: red; } /* niska specyficzność */

Pseudo-elementy

p::before { content: '⭐ '; }
p::after { content: ' (koniec)'; color: gray; }
::first-letter { font-size: 2rem; }
::first-line { text-transform: uppercase; }
::selection { background: #6610f2; color: white; }
::placeholder { color: #6c757d; }

• :nth-child(n) – po pozycji
• :has() – warunkowy
• :where() / :is() – grupowanie
• ::before / ::after – dodają treść
• ::first-letter – pierwsza litera
• ::selection – zaznaczony tekst
• :focus – stan fokus

Zadanie

W pliku style.css i index.html:

• dodaj ::before do h2 (ikona)
• styluj co drugi wiersz listy :nth-child(even)
• użyj :has() do stylowania div z img
• zmień kolor ::placeholder w input