Selektory — CSS

Selektory wskazują, do których elementów stosuje się reguła.

Jak to działa?

p wybiera znaczniki, .card klasę, a #hero identyfikator. Możesz też wybierać elementy potomne, np. .card p.

Przykład 1 — poznaj zapis

h2 { color: #111827; }
.card { padding: 1rem; }
#hero { background: #eef2ff; }

Selektory odnoszą się do odpowiednich elementów i atrybutów HTML.

Przeczytaj kod linijka po linijce

h2 { color: #111827; }Nadajemy kolor lub wygląd tła.
.card { padding: 1rem; }Ustawiamy odstępy elementów.
#hero { background: #eef2ff; }Nadajemy kolor lub wygląd tła.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Wybór elementów po znaczniku, klasie i identyfikatorze.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

.notice { background: #eef; padding: 1rem; }

Wynik drugiego przykładupo uruchomieniu przykładu

Element klasy notice ma jasne tło i wewnętrzny odstęp.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Dodaj klasę highlight i nadaj jej tło.