CSS – selektory – notatki z lekcji
Notatki dotyczące selektorów w CSS, które umożliwiają stylizację elementów HTML. Zrozumienie selektorów jest kluczowe dla efektywnego korzystania z CSS.
Quiz(16 pytania)
1. Który selektor wybiera elementy po klasie?
Pojęcia w tym zestawie(18)
Selektor typu
Wybiera wszystkie elementy danego typu, np. 'p' wybiera wszystkie akapity.
Selektor klasy
Oznaczany kropką (.) i wybiera elementy z określoną klasą, np. '.example'.
Selektor identyfikatora
Oznaczany hashtagiem (#) i wybiera element z unikalnym ID, np. '#header'.
Prawda czy fałsz: Selektor uniwersalny (*) wybiera wszystkie elementy.
Prawda, ponieważ (*) dopasowuje każdy element na stronie.
Różnica między selektorami klasy a ID
Klasa (.) może być używana wielokrotnie, ID (#) jest unikalne w obrębie dokumentu.
Selektor atrybutu
Wybiera elementy na podstawie wartości atrybutów, np. 'input[type="text"]'.
Jak zdefiniować selektor potomka?
Element potomny jest definiowany przez spację, np. 'div p' wybiera wszystkie akapity w div.
Selektor złożony
Może łączyć różne selektory, np. 'div.class1, p.class2'.
Prawda czy fałsz: Selektor :hover działa na każdym elemencie.
Fałsz, ponieważ :hover działa na elementach interaktywnych, jak linki.
Pseudoklasa :first-child
Wybiera pierwszy element w danym rodzicu, np. 'li:first-child'.
Uzupełnij: Selektor :nth-child(n) wybiera ___ elementy.
n-ty element wśród rodzeństwa, gdzie n jest liczbą lub wzorem.
Jak działa selektor grupowy?
Łączy wiele selektorów, oddzielając je przecinkami, np. 'h1, h2, h3'.
Prawda czy fałsz: Selektory CSS są czułe na wielkość liter.
Prawda, selektory klasowe i ID są czułe na wielkość liter.
Pseudoklasa :active
Działa na elemencie, gdy jest aktywny, np. podczas kliknięcia przycisku.
Jakie znaki są używane do definiowania klasa i ID?
Kropka (.) dla klasy i hashtag (#) dla ID.
Prawda czy fałsz: Selektor :not() wybiera elementy, które nie spełniają warunku.
Prawda, dzięki temu można wykluczyć określone elementy.
Różnica między :nth-of-type a :nth-child
:nth-of-type wybiera elementy określonego typu, a :nth-child wszystkie elementy.
Selektor :last-child
Wybiera ostatni element w danym rodzicu, np. 'li:last-child'.
Pytania w tym zestawie(16)
1. Który selektor wybiera elementy po klasie?
2. Które z poniższych jest selektorem identyfikatora?
3. Jak działa selektor potomka?
4. Który z selektorów nie jest pseudoklasą?
5. Prawda czy fałsz: Selektor uniwersalny (*) może być używany do stylizacji wszystkich elementów.
6. Które z poniższych jest selektorem złożonym?
7. Jakie jest zastosowanie selektora :not()?
8. Który selektor odpowiada za wybór pierwszego dziecka?
9. Jakie znaki używane są w selektorach CSS?
10. Które z poniższych jest przykładem selektora atrybutu?
11. Jak działa selektor :nth-of-type(n)?
12. Czym różni się :nth-child od :nth-of-type?
13. Prawda czy fałsz: Selektor :hover działa na wszystkich elementach.
14. Co oznacza selektor:hover?
15. Jakie elementy może wybierać selektor .class?
16. Jakie znaki używane są do definiowania selektora grupowego?
Powiązane zestawy
Stwórz własny zestaw
Wgraj PDF, wklej notatki lub opisz temat – AI wygeneruje fiszki, quizy i więcej w kilka sekund.
