Selektory CSS

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

Selektory CSS

Selektor CSS określa, które elementy HTML mają zostać ostylowane. Po selektorze zapisuje się blok deklaracji w nawiasach klamrowych.

Podstawowa składnia

selektor {
  właściwość: wartość;
}

Przykład:

h1 {
  color: blue;
}

Ten kod ustawia niebieski kolor tekstu dla wszystkich nagłówków pierwszego poziomu, czyli elementów <h1>.

Przykładowe selektory

  • p - wybiera wszystkie akapity <p>,
  • h1 - wybiera wszystkie nagłówki pierwszego poziomu <h1>,
  • .menu - wybiera elementy z klasą menu,
  • #header - wybiera element o identyfikatorze header,
  • h1::first-letter - wybiera pierwszą literę elementu h1.

Selektor elementu a pseudoelement

W zapisie:

h1::first-letter {
  color: red;
}

część h1 wskazuje element HTML, którego dotyczy styl, a ::first-letter zawęża działanie tylko do pierwszej litery tego elementu.

Znaczenie w egzaminie INF.03

W zadaniach egzaminacyjnych często trzeba odczytać, czego dotyczy reguła CSS. Należy analizować zapis od lewej strony: najpierw sprawdzić selektor elementu, potem ewentualne klasy, identyfikatory, pseudoklasy lub pseudoelementy.