Dokumentacja CSS z przykładami: Selektor klasy

Q: Jak wybrać klasę w CSS?

Napisz kropkę, a po niej nazwę klasy: .card { ... } stylizuje każdy element z class="card". Kropka występuje tylko w CSS; atrybut w HTML nie ma kropki.

Q: Jak nadać elementowi dwie klasy?

Rozdziel nazwy spacją w jednym atrybucie: class="btn primary". Dwukrotne wpisanie class na elemencie nie działa; przeglądarka zachowuje tylko pierwszy atrybut.

Q: Jak wybrać element, który ma dwie klasy?

Połącz selektory klas bez spacji: .btn.primary pasuje do elementów, które mają obie klasy. Ze spacją .btn .primary oznacza element .primary wewnątrz elementu .btn.

Selektor klasy i selektor id w CSS (.class i #id)

Selektor klasy (.name) stylizuje każdy element z tą klasą; selektor id (#name) stylizuje jeden element o tym id. Poznaj składnię, wiele klas i łączenie klas, różnicę między klasą a id, zasady nazewnictwa i przełączanie klas w JavaScripcie.

Na tej stronie są działające edytory: edytuj, uruchamiaj i od razu zobacz wynik.

Autor: Kevin Spektor, Współzałożyciel i CTO

Opublikowano Sep 24, 2026

Selektor klasy

Selektor klasy to kropka, a po niej nazwa klasy. Stylizuje każdy element, którego atrybut class zawiera tę nazwę, bez względu na typ elementu.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Class selector</title>
  <style>
    .badge {
      background: #2563eb;
      color: white;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>New <span class="badge">beta</span></p>
  <h2>Release <span class="badge">v2</span></h2>
  <a class="badge" href="#">a link with the class</a>
</body>
</html>

Kropka pojawia się tylko w CSS. W HTML atrybut to class="badge", bez kropki. W nazwach klas wielkość liter ma znaczenie: .Badge nie pasuje do class="badge".

Wiele klas na jednym elemencie

Element może mieć dowolną liczbę klas rozdzielonych spacjami. Każda wnosi własne reguły i właśnie tak buduje się warianty z małych kawałków:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple classes</title>
  <style>
    .btn {
      border: 2px solid #2563eb;
      background: white;
      color: #2563eb;
      padding: 8px 14px;
      border-radius: 6px;
    }
    .primary { background: #2563eb; color: white; }
    .large { font-size: 20px; }

    /* chained: only elements with BOTH classes */
    .btn.danger { border-color: #f59e0b; color: #111827; background: #f59e0b; }
  </style>
</head>
<body>
  <button class="btn">Default</button>
  <button class="btn primary">Primary</button>
  <button class="btn primary large">Primary large</button>
  <button class="btn danger">Danger</button>
  <span class="danger">.danger alone: no style</span>
</body>
</html>

.btn.danger, bez spacji, pasuje do elementów, które mają obie klasy. Ostatni span ma danger, ale nie ma btn, więc połączona reguła go pomija.

Warianty selektora klasy

Selektor	Pasuje do
`.note`	Dowolnego elementu z klasą `note`
`p.note`	Tylko elementów `<p>` z klasą `note`
`.btn.primary`	Elementów z klasami `btn` i `primary` jednocześnie
`.card .title`	`.title` w dowolnym miejscu wewnątrz `.card`
`.card > .title`	`.title`, którego rodzicem jest `.card`
`.a, .b`	Elementów z klasą `a` albo `b`

Różnicę między spacją a jej brakiem, razem z innymi kombinatorami, omawia strona o selektorach CSS.

Selektor id

Selektor id to krzyżyk, a po nim id: #site-header stylizuje element z id="site-header". Id musi być unikalne na stronie, więc selektor id trafia dokładnie w jeden element.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ID selector</title>
  <style>
    #summary {
      border: 2px solid #16a34a;
      padding: 10px;
      border-radius: 6px;
    }
    #details { margin-top: 8px; background: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <div id="summary">Styled by #summary</div>
  <div id="details">Styled by #details</div>
</body>
</html>

Id służy nie tylko do stylów: href="#details" przewija do elementu, <label for="email"> wskazuje id pola, a JavaScript znajduje element przez document.getElementById('details'). To zwykły powód, żeby nadać elementowi id; do stylizowania lepiej nadaje się klasa.

Klasa a id

	Klasa `.name`	Id `#name`
Na stronie	Wiele elementów	Jeden element
Na elemencie	Kilka, rozdzielonych spacjami	Jedno
Specyficzność	(0,1,0)	(1,0,0)
Cel odnośnika (`#name` w adresie URL)	Nie	Tak
Najlepsze do	Stylizowania	Kotwic, etykiet, zaczepów dla JavaScriptu

Różnica w specyficzności to praktyczny powód, żeby stylizować klasami. Jedno id wygrywa z dowolną liczbą klas, więc regułę zapisaną z id może nadpisać tylko inne id, styl w linii albo !important:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #promo { background: #e5e7eb; padding: 10px; }
    .card.featured.highlight { background: #f59e0b; } /* three classes */
  </style>
</head>
<body>
  <div id="promo" class="card featured highlight">
    Still gray: the ID beats three classes.
  </div>
</body>
</html>

Dodawanie i usuwanie klas w JavaScripcie

Klasy to normalny sposób, w jaki JavaScript zmienia wygląd elementu: CSS definiuje stany, a skrypt tylko je przełącza.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>classList</title>
  <style>
    .panel { border: 2px solid #e5e7eb; padding: 10px; border-radius: 6px; }
    .panel.open { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <button id="toggle">Toggle .open</button>
  <div class="panel" id="panel">The panel.</div>
  <script>
    const panel = document.getElementById('panel');
    document.getElementById('toggle').addEventListener('click', () => {
      panel.classList.toggle('open');
      panel.textContent = 'class="' + panel.className + '"';
    });
  </script>
</body>
</html>

classList ma też add, remove, contains i replace. Unikaj bezpośredniego przypisywania className: zastępuje wszystkie klasy, które element miał.

Nazywanie klas

Litery, cyfry, łączniki i podkreślenia są bezpieczne: card, card-title, card__title, is-open.
Nie zaczynaj selektora od cyfry ani od łącznika, po którym jest cyfra. .2col to niepoprawny CSS. Zacznij od litery (.cols-2) albo poprzedź cyfrę znakiem ucieczki (.\32 col).
Nazywaj według przeznaczenia, a nie wyglądu: .error przetrwa zmianę projektu, .red-text nie.
W większych projektach pomaga konwencja nazewnictwa. BEM zapisuje block__element--modifier, na przykład .card__title--large.

Częste błędy

Kropka w HTML. class=".badge" nigdy nie pasuje do .badge.
Dwa atrybuty class. <p class="a" class="b"> zachowuje tylko a. Użyj class="a b".
Spacja, gdy chodziło o obie klasy. .btn .primary szuka zagnieżdżonego elementu; .btn.primary to ten sam element.
Powtórzone id. Zduplikowane id psują getElementById, odnośniki do kotwic i powiązania etykiet, nawet jeśli CSS wydaje się działać.
Stylizowanie wszystkiego przez id. Ich specyficzność utrudnia późniejsze nadpisywanie; używaj klas.

Najczęściej zadawane pytania

Jak wybrać klasę w CSS?

Napisz kropkę, a po niej nazwę klasy: .card { ... } stylizuje każdy element z class="card". Kropka występuje tylko w CSS; atrybut w HTML nie ma kropki.

Czym różni się klasa od id w CSS?

Klasy można użyć na dowolnej liczbie elementów, a element może mieć ich kilka; id musi być unikalne na stronie, a element ma najwyżej jedno. W CSS #id ma dużo wyższą specyficzność niż .class, więc reguły z id trudniej nadpisać.

Jak nadać elementowi dwie klasy?

Rozdziel nazwy spacją w jednym atrybucie: class="btn primary". Dwukrotne wpisanie class na elemencie nie działa; przeglądarka zachowuje tylko pierwszy atrybut.

Jak wybrać element, który ma dwie klasy?

Połącz selektory klas bez spacji: .btn.primary pasuje do elementów, które mają obie klasy. Ze spacją .btn .primary oznacza element .primary wewnątrz elementu .btn.

Czy nazwa klasy CSS może zaczynać się od cyfry?

W HTML może, ale selektor nie może zaczynać się od cyfry bez znaku ucieczki, więc .1col to niepoprawny CSS. Poprzedź cyfrę znakiem ucieczki (.\31 col) albo, co lepsze, zaczynaj nazwy klas od litery.

Powiązane zagadnienia