Selektory CSS
Selektor CSS wybiera elementy HTML, które chcesz nadać stylowi.
Selektory CSS
Selektory CSS są używane do "znajdowania" (lub wybierania) elementów HTML, które chcesz stylizować.
Selektory CSS możemy podzielić na pięć kategorii:
- Selektory proste (wybierz elementy na podstawie nazwy, identyfikatora, klasy)
- Selektory kombinacji (wybierz elementy na podstawie określonej relacji między nimi)
- Selektory pseudoklas (wybierz elementy na podstawie określonego stanu)
- Selektory pseudoelementów (wybór i stylizacja części elementu)
- Selektory atrybutów (wybierz elementy na podstawie atrybutu lub wartości atrybutu)
Na tej stronie wyjaśniono najbardziej podstawowe selektory CSS.
Selektor elementów CSS
Selektor elementu wybiera elementy HTML na podstawie nazwy elementu.
Przykład
Tutaj wszystkie elementy <p> na stronie będą wyrównane do środka, z czerwonym kolorem tekstu:
p
{
text-align: center;
color: red;
}
Selektor identyfikatorów CSS
Selektor id używa atrybutu id elementu HTML, aby wybrać określony element.
Identyfikator elementu jest unikalny na stronie, więc selektor identyfikatora służy do wybrania jednego unikalnego elementu!
Aby wybrać element o określonym identyfikatorze, napisz znak hash (#), a następnie identyfikator elementu.
Przykład
Poniższa reguła CSS zostanie zastosowana do elementu HTML z id="para1":
#para1
{
text-align: center;
color: red;
}
Uwaga: nazwa identyfikatora nie może zaczynać się od cyfry!
Selektor klas CSS
Selektor klasy wybiera elementy HTML z określonym atrybutem klasy.
Aby wybrać elementy z określoną klasą, wpisz kropkę (.), a następnie nazwę klasy.
Przykład
W tym przykładzie wszystkie elementy HTML z class="center" będą czerwone i wyrównane do środka:
.center {
text-align: center;
color: red;
}
Możesz również określić, że tylko określone elementy HTML powinny mieć wpływ na klasę.
Przykład
W tym przykładzie tylko <p> elementy z class="center" będą czerwone i wyrównane do środka:
p.center {
text-align: center;
color: red;
}
Elementy HTML mogą również odnosić się do więcej niż jednej klasy.
Przykład
W tym przykładzie element <p> będzie stylizowany zgodnie z class="center" i class="large":
<p class="center large">This paragraph refers to two classes.</p>
Uwaga: nazwa klasy nie może zaczynać się od numeru!
Uniwersalny selektor CSS
Selektor uniwersalny (*) zaznacza wszystkie elementy HTML na stronie.
Przykład
Poniższa reguła CSS wpłynie na każdy element HTML na stronie:
*
{
text-align: center;
color: blue;
}
Selektor grupowania CSS
Selektor grupowania wybiera wszystkie elementy HTML z tymi samymi definicjami stylów.
Spójrz na następujący kod CSS (elementy h1, h2 i p mają te same definicje stylów):
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}Lepiej będzie pogrupować selektory, aby zminimalizować kod.
Aby pogrupować selektory, oddziel każdy selektor przecinkiem.
Przykład
W tym przykładzie pogrupowaliśmy selektory z powyższego kodu:
h1, h2, p
{
text-align: center;
color: red;
}
Wszystkie proste selektory CSS
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |