3. CSS3 - język opisu wyglądu

3.1. Podstawowe selektory

Selektory w języku CSS3 to mechanizmy służące do określania, które elementy HTML mają zostać sformatowane za pomocą reguł CSS. Są kluczowym elementem CSS, ponieważ pozwalają wybrać elementy na stronie i zastosować do nich określone style (np. kolory, marginesy, rozmiar czcionki).

W CSS3 wprowadzono kilka nowych selektorów, które rozszerzają możliwości stylizowania elementów HTML w jeszcze bardziej precyzyjny i złożony sposób.

Podstawowe selektory

Selektor uniwersalny ( * )
  • Pasuje do wszystkich elementów na stronie.
  • Jest użyteczny, gdy chcesz zastosować styl do całej strony lub do wszystkich elementów.
* {
    margin: 0;
    padding: 0;
}
Wyzeruje marginesy i paddingi dla wszystkich elementów na stronie.
Selektor typu (np. h1, p)
  • Styluje wszystkie elementy danego typu (tagu) HTML, np. wszystkie nagłówki <h1> lub akapity <p>.
h1 {
    color: blue;
    font-size: 24px;
}
Ustawia kolor tekstu i rozmiar wszystkich nagłówków <h1>.
Selektor klasy (.classname)
  • Wybiera wszystkie elementy, które mają przypisaną określoną klasę za pomocą atrybutu class.
HTML: 
<div class="box">
    To jest ramka
</div>
<div class="box">
    To też jest ramka
</div>
CSS: 
.box {
    border: 2px solid black;
    padding: 10px;
}
Zastosuje styl do wszystkich elementów o klasie box.

Selektor identyfikatora (#id)
  • Wybiera jeden unikalny element, który ma przypisany określony identyfikator (ID) za pomocą atrybutu id.
HTML:
<div id="main">
    To jest główny element
</div>
CSS: 
#main {
    background-color: yellow;
    padding: 20px;
}
Styl zostanie zastosowany tylko do elementu o ID równym main.
Grupowanie selektorów (np. h1, p)
  • Umożliwia zastosowanie tego samego stylu do wielu różnych elementów.
h1, p {
    color: green;
}
Ustawia zielony kolor tekstu zarówno dla wszystkich elementów <h1>, jak i <p>.

Lektura uzupełniająca: W3Schools / CSS Selectors.