Selektory CSS

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Czym są selektory CSS?

Selektory CSS określają, do których elementów HTML mają zostać zastosowane reguły stylu. Selektor zapisuje się przed blokiem deklaracji CSS, np.:

p {
  color: red;
}

Powyższy zapis formatuje wszystkie akapity <p>.

Najważniejsze typy selektorów

  • p — selektor elementu, wybiera wszystkie znaczniki <p>
  • .tekst — selektor klasy, wybiera elementy z class='tekst'
  • #obrazki — selektor identyfikatora, wybiera element z id='obrazki'
  • p.tekst — wybiera tylko akapity <p> mające klasę tekst
  • div#obrazki — wybiera tylko element <div> mający identyfikator obrazki

Grupowanie selektorów

Aby zastosować ten sam styl do kilku różnych elementów, selektory rozdziela się przecinkiem:

p.tekst, div#obrazki {
  color: blue;
}

Ten zapis oznacza: sformatuj jednocześnie akapity z klasą tekst oraz element div o identyfikatorze obrazki.

Czego nie mylić?

Znak + w CSS nie służy do grupowania. Jest to selektor sąsiedniego rodzeństwa, np.:

p + div {
  margin-top: 20px;
}

Oznacza on element div, który występuje bezpośrednio po elemencie p. Dlatego w pytaniach o jednoczesne formatowanie kilku niezależnych elementów należy szukać przecinka, a nie znaku plus.