Typy selektorów
Typy selektorów
Typy selektorów to bezpłatna lekcja HTML for Kids na CoddyKit. To lekcja 1 z 1. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML for Kids, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML for Kids zawiera 1 lekcji w sumie.
Wprowadzenie
Witajcie,
W tej lekcji poszerzymy wiedzę o CSS, poznając bardziej złożone selektory.
Wiele definicji stylów
Możemy utworzyć wiele definicji stylów, umieszczając między nimi średniki.
.first{
color:blue;
font-size:20px;
text-align: center;
}dokument HTML, który staje się bardziej złożony
Do tej pory pracowaliśmy z prostymi selektorami znaczników, identyfikatorów i klas. Jednak w niektórych przypadkach, gdy interfejs użytkownika staje się bardziej złożony, będziemy potrzebować bardziej zaawansowanych selektorów.
Poniżej znajduje się dokument HTML, który jest bardziej złożony.
<body>
<div id="my-area">
<p class="first">lorem</p>
<div class="second">
<p class="third">Ipsum</p>
</div>
</div>
</body>Analiza przykładu
Przeanalizujmy teraz nasz kod.
- W treści strony znajduje się element div z identyfikatorem my-area, który pełni funkcję kontenera. Jest on przodkiem wszystkich elementów znajdujących się wewnątrz tego elementu div.
- Element p z klasą first jest elementem równorzędnym elementu div z klasą second.
- Trzeci element jest elementem potomnym drugiego elementu, a element my-area można uznać za przodka trzeciego elementu.
Ostrzeżenie
Układ HTML można rozumieć dosłownie jako drzewo genealogiczne.
Można odziedziczyć cechę genetyczną po dziadku.
Jeśli jednak ta cecha zmieni się u ojca, gen ojca będzie bardziej dominujący, a cecha odziedziczona po dziadku ulegnie zmianie.
Łączenie selektorów
Zobaczmy teraz, jak łączyć selektory.
Poniższa instrukcja oznacza, że element z klasą second jest przodkiem (elementem potomnym lub wnukiem) elementu z klasą third.
Jeśli między dwiema klasami znajduje się spacja, oznacza to, że klasa po lewej stronie wyszukuje element potomny.
.second .third{
color:red;
}Selektor elementu potomnego
W poniższym przykładzie
oznacza to wybór klasy third, która jest elementem potomnym klasy second.
Znak większości oznacza wybór elementu potomnego danego elementu.
.second > .third{
color:red;
}możemy połączyć selektor znacznika i klasy, aby wybrać element
Możemy również połączyć selektor znacznika i klasy, aby wybrać element.
Poniższy przykład wybierze elementy p z klasą third.
<style>
p.third{
color:red;
}
</style>
<p class="third">Hello CSS</p>Załóżmy, że chcemy wybrać element div z klasą first
Załóżmy, że chcemy wybrać element div z klasą first.
W poniższym przykładzie oznacza to wybór elementu z klasą first, który jest elementem potomnym elementu div z identyfikatorem my-area.
Zwiększa to specyficzność wybieranego elementu.
div#my-area > .first{
color:red;
}Wybieranie wszystkich elementów
Gwiazdka (*) jest ważnym symbolem wśród selektorów.
Oznacza ona wybór wszystkich elementów.
W poniższym przykładzie selektor oznacza, że element z identyfikatorem my-area powinien wybrać wszystkich swoich potomków.
Należy pamiętać, że chodzi nie tylko o bezpośrednie elementy potomne, lecz o wszystkich potomków.
Jeśli chcielibyśmy wybrać tylko bezpośrednie elementy potomne, musielibyśmy umieścić znak większości przed gwiazdką.
/* It chooses all the descendants of #my-area. */
#my-area *{
color:red;
}
/* It chooses all the children of #my-area. */
#my-area > *{
color:red;
}Selektor bezpośredniego elementu równorzędnego
Użyliśmy selektora potomków i selektora elementu potomnego, a teraz poznajmy selektor elementów równorzędnych.
Selektor elementu równorzędnego używa znaku + do wybrania następnego elementu równorzędnego.
W naszym przykładzie selektor pokoloruje tło trzeciego elementu akapitu na żółto.
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
</body>
</html>Selektor wszystkich elementów równorzędnych
Jeśli chcemy wybrać nie tylko pierwszy następny element równorzędny, lecz wszystkie kolejne elementy równorzędne, używamy tyldy (~).
Symbol tyldy jest również znany jako kombinator kolejnych elementów równorzędnych.
<style>
div ~ p {
background-color: red;
}
</style>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>
Pseudoklasy i klasy CSS
Wyrażenia, które nie są klasami, ale zachowują się jak klasy, nazywamy pseudoklasami.
Nie definiujemy pseudoklas dla żadnego elementu w HTML.
Podczas interpretowania kodu przeglądarka zakłada, że one istnieją. Dlatego możemy używać pseudoklas w selektorach CSS.
Pseudoklasa :hover
Spośród pseudoklas :hover jest bez wątpienia najbardziej znana.
Hover (:hover) to pseudoklasa, która jest automatycznie stosowana przez przeglądarkę do danego elementu, gdy kursor myszy znajduje się nad tym elementem.
Pseudoklas używa się po symbolu dwukropka (:) w instrukcji selektora.
Składnię użycia pseudoklasy przedstawiono poniżej.
selector:pseudo-class {
property: value;
}Stylowanie łączy za pomocą :hover
Utwórzmy teraz łącze i zobaczmy, jak będzie wyglądać po najechaniu na nie kursorem.
Ostrzeżenie: Ponieważ na urządzeniach mobilnych nie występuje zdarzenie hover takie jak w przeglądarce internetowej, efekt ten nie będzie widoczny w aplikacjach mobilnych Coddykit.
W poniższym przykładzie zobaczymy, że po najechaniu kursorem myszy na łącze jego kolor zmieni się na zielony.
<!DOCTYPE html>
<html>
<head>
<style>
.my-link{
color:red;
}
.my-link:hover{
color:green;
}
</style>
</head>
<body>
<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>
</body>
</html>Pseudoklasa :first-child
Jedną z najbardziej mylących pseudoklas jest :first-child.
Zwykle na podstawie nazwy możemy wywnioskować, że służy ona do wybrania pierwszego elementu potomnego danego elementu.
W rzeczywistości ten wniosek jest nieprawidłowy.
Służy ona do wybrania pierwszego elementu spośród elementów równorzędnych danego elementu.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the first p element
among children of the my-box class. */
.my-box p:first-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>Pseudoklasa :last-child
last-child jest przeciwieństwem pseudoklasy first-child. Służy do wybrania ostatniego elementu spośród elementów równorzędnych danego elementu.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the last p element
among children of the my-box class. */
.my-box p:last-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>Pseudoelement ::before
Jeśli chcemy dodać coś przed elementem, używamy pseudoselektora ::before.
W poniższym przykładzie dodaliśmy treść „Hello” przed elementami nagłówków.
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: "Hello ";
}
</style>
</head>
<body>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
</body>
</html>Pseudoelement ::after
Pseudoelement ::after, będący przeciwieństwem pseudoelementu ::before, służy do dodawania nowej treści za elementem.
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: " Coddykit";
}
</style>
</head>
<body>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>Pseudo-klasy listy
Poznaliśmy najczęściej używane pseudo-klasy. Istnieją jednak dziesiątki innych.
Listę wszystkich pseudo-klas można znaleźć pod poniższym linkiem. Można użyć dowolnej z nich, gdy zajdzie taka potrzeba.
Gratulacje
Gratulacje 🎉
W tej sekcji poznaliśmy rodzaje selektorów.
W następnej sekcji poznamy najczęściej używane właściwości CSS
Często zadawane pytania
Czy lekcja „Typy selektorów” jest bezpłatna?
Tak — pełny tekst „Typy selektorów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML for Kids, przejdź na CoddyKit PRO. Kurs HTML for Kids zawiera 1 lekcji w sumie.
Co nauczysz się w „Typy selektorów”?
Typy selektorów Ćwiczysz HTML for Kids z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML for Kids?
Nie wymagamy żadnego doświadczenia. HTML for Kids w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 1.
Ile czasu zajmuje lekcja „Typy selektorów”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML for Kids?
Tak. Każda lekcja HTML for Kids zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.