Selektory
Wstęp
W tej lekcji poznasz kolejne selektory, które pozwolą Ci lepiej odwoływać się do danych elementów na stronie internetowej. Do tej pory poznałeś odwołanie za pomocą nazwy danego znacznika. Teraz dowiesz się, jak spośród wszystkich znaczników odwołać się tylko do jednego konkretnego elementu lub do grupy elementów. Znając HTML już powinieneś wiedzieć co to jest identyfikator, a także klasa, jednak jeśli wyleciało Ci to z głowy, to znajdziesz w tej lekcji również krótkie przypomnienie tego zagadnienia.
Selektor ogólny
Jeśli chcesz się odwołać do wszystkich elementów, możesz to zrobić. Wystarczy jako selektora użyć gwiazdki -*.
Ciekawsze użycie tego selektora zobaczysz w dalszej części lekcji.
| 123 | *{color:green;} |
|---|---|
Klasa
Klasę do elementu HTML przypisujemy poprzez użycie atrybutuclass, do którego jako wartość przekazujemy nazwę klasy lub kilka klas oddzielonych spacją. Warto jeszcze wspomnieć o tym, że wiele elementów strony może posiadać tą samą klasę.
| 12 | <pclass="mojaKlasa">Ten kurs jest super!</p><pclass="mojaKlasa">Zgadzam się!</p> |
|---|---|
Aby w kodzie CSS dodać style do określonej klasy, należy wpisać kropkę.a następnie nazwę klasy.
| 123 | .mojaKlasa{color:green;} |
|---|---|
Identyfikator
Aby przypisać identyfikator do elementu, należy wykorzystać atrybutid. Co ważne, na całej stronie tylko jeden element HTML może mieć przypisaną daną wartość identyfikatora.
| 1 | <pid="mojeId">Ten kurs jest super!</p> |
|---|---|
Chcąc odwołać się do takiego identyfikatora w kodzie CSS, należy użyć następującego zapisu.
| 123 | #mojeId{color:green;} |
|---|---|
Przed identyfikatorem zawsze dajemy znak hashu #.
Musisz jednak wiedzieć, że stylowanie w oparciu identyfikatory nie jest zalecane. Jest tak dlatego, iż styl nadany przez id ma większy priorytet niż taki nadany przez klasę lub znacznik. Nadużywanie selektorów korzystających z identyfikatorów, może spowodować duże trudności w dodaniu nowych stylów.
Hierarchia
Teraz przejdziemy do trochę bardziej zaawansowanych zagadnień. Do tej pory odwoływaliśmy się do każdego znacznika. W tej części dowiesz się jak wybrać elementy, które znajdują się w innym, konkretnym znaczniku, “braci” danego znacznika, a także jego “dzieci”.
W tej części lekcji będziemy pracować na następującym kodzie HTML:
| 1 2 3 4 5 6 7 8 910 | <p>Paragraf przed</p><divclass="mojaKlasa"><p>Paragraf w środku</p><div><p><a>Link bardziej w środku w elemencie p</a></p><a>Link bardziej w środku</a></div></div><p>Paragraf na zewnątrz</p><p>Jeszcze jeden paragraf na zewnątrz</p> |
|---|---|
Do każdego z elementów zostało również dodane wypełnienie, obramowanie i margines, tak aby lepiej zobrazować zagnieżdżanie elementów.
Na początek wybierzmy wszystkich potomków danego znacznika, czyli wszystkie elementy, które zostały w nim zagnieżdżone. Tu sprawa jest prosta, wystarczy oddzielić dane selektory odstępem.
| 123 | .mojaKlasap{color:green;} |
|---|---|
Wyjaśnijmy po kolei powyższy kod. CSS wybierze wszystkie elementypktóre są potomkami elementu.mojaKlasai zmienia kolor ich tekstu na zielony.
Kolejnym przykładem jest wybór dziecka danego znacznika, czyli elementu bezpośrednio zagnieżdżonego w danym znaczniku. Najłatwiej zrozumieć to uruchamiając poniższy przykład.
| 123 | .mojaKlasa>p{color:blue;} |
|---|---|
Kolor zostanie zmieniony tylko jednemu paragrafowi, ponieważ tylko jeden jest dzieckiem.mojaKlasa. Drugi paragraf, nie zostanie zmieniony, ponieważ nie jest jego dzieckiem, element ten jest dzieckiem elementudivi potomkiem.mojaKlasa.
Inną, nieco już bardziej skomplikowaną sprawą jest wybór brata, czyli elementu, który ma tego samego rodzica, co aktualny.
| 123 | .mojaKlasa+p{color:red;} |
|---|---|
.mojaKlasama aż trzech braci, ale tylko jednemu zostanie zmieniony kolor. Jest tak dlatego, że symbol+służy do wyboru kolejnego brata, czyli elementu posiadającego tego samego rodzica, co aktualnie wybrany oraz znajdujący się bezpośrednio po nim.
Bardzo podobnie działa symbol~, jednak w odróżnieniu od+wybiera wszystkich kolejnych braci, a nie tylko jednego następnego.
W poniższym przykładzie każdy elementpbędzie koloru morskiego tylko i wyłącznie wtedy, gdy jeden z poprzednich braci jest element z klasąmojaKlasa.
| 123 | .mojaKlasa~p{color:aqua;} |
|---|---|
Być może zauważyłeś, że w przykładach tej części lekcji znajduje się jeszcze plikadditional_styles.css. Zawiera on dodatkowe pomocnicze style pozwalające lepiej zobrazować strukturę elementów. Znajduje się w nim selektorbody *, który służy do wyboru wszystkich elementów znajdujących się wbody.
Wybór kilku grup
Aby odwołać się do kilku grup określonych przez różne selektory, należy te selektory rozdzielić przecinkiem.
W poniższym przykładzie znacznikih1,h4,pbędą koloru czerwonego. Zamiast takich prostych selektorów, można oczywiście użyć tych bardziej zaawansowanych, poznanych w tej lekcji.
| 123 | h1,h4,p{color:red;} |
|---|---|
Zadanie 1
W tym zadaniu Twoim celem jest ustawieniefont-weighto wartości400dla elementówh1orazh2. Dodatkowo elementh1ma posiadać właściwośćtext-transformz wartościąuppercase.
Wybór na podstawie atrybutu
W CSS możemy także wybierać elementy, które posiadają dany atrybut i/lub konkretną wartość.
W poniższym przykładzie kolor tła zostanie zmieniony wszystkim znacznikominput, których atrybuttypejest równytext.
| 123 | input[type='text']{background-color:#49FFEF;} |
|---|---|
Przeanalizujmy inną sytuację.
W poniższym przykładzie kolor zostanie zmieniony wszystkim znacznikom a którzy w ogóle posiadają atrybuthref. Nie ma znaczenia wartość w tym atrybucie.
| 123 | a[href]{background-color:#94FFFA;} |
|---|---|
Podsumowanie
W tej lekcji zajęliśmy się bardzo ważnym tematem jakim są selektory. Aby dodać styl do określonych elementów, trzeba je przecież najpierw wybrać przy pomocy selektora. Na początku miałeś okazję poznać selektor ogólny, następnie selektor korzystający z klasy, a potem taki, używający identyfikatora. Przyjrzeliśmy się również trochę bardziej zaawansowanym tematom, jakim bez wątpienia są selektory korzystające z hierarchii elementów HTML, używające atrybutów elementów oraz wartości. W tej lekcji dowiedziałeś się również jak przypisać jedną grupę reguł CSS do kilku selektorów.
- Naucz się CSS
- Selektory
Zrobiłeś
1
z 1 zadań.