Zagnieżdzony bezpośrednio
We wcześniejszych postach przedstawiałem Wam podstawy CSS. Zapoznaliście się z podstawowymi selektorami, bez których praca w CSS byłaby niemożliwa. Teraz w najbliższych materiałach dowiecie się o nich znacznie więcej.
Selektor CSS to rodzaj drogowskazu określający, którym elementom chcemy nadać lub zmieniać właściwości. CSS ciągle się rozwija, więc możemy tworzyć coraz bardziej złożone konstrukcje i dokładnie wybierać elementy poprzez łączenie kilku selektorów.
Wykonując ćwiczenia z poprzednich materiałów, pamiętasz, aby napisać regułę dla elementu (np. paragrafu) będącego potomkiem innego elementu HTML, należy stworzyć następujący selektor:
.element p {}Powyższy selektor wskazuję na element “
” który został zagnieżdżony w elemencie z klasą “.element”.
Zadajmy sobie pytanie. Chcemy, aby reguła dotyczyła jedynie elementu paragrafu, a dokładniej o jeden poziom niżej od elementu “.element” – co należy zrobić? Należy użyć kombinatora, w tym przypadku: “>”.
Selektor:
.element > pwskaże jedynie element paragrafu będący potomkiem (dzieckiem) elementu “.element” o jeden poziom niżej, a wszystkie inne zostały by pominięte.
Przejdźmy do przykładu. Mam nadzieję że w praktyce zobaczycie jakie to proste😉
W kolejności – jeden po drugim
W tym akapicie postaram się Wam spróbować wskazać “brata” danego elementu, występującego zaraz po innym elemencie, na tym samym poziomie zagnieżdżenia. Służy do tego kombinator “+”. Poniżej dodaję przykład użycia powyższego kombinatora:Tłumacząc powyższy zapis – wybierz tylko te elementy “p” będące bezpośrednio za “h1”. Selektor spełni swoją rolę pod warunkiem, że w pliku HTML kolejność tagów będzie następująca:
Jeśli jednak przypadkowo wkradnie się inny element między te wybrane w selektorz to selektor nie zadziała, np:
Spójrz na nasz przykład. Zastosowałem w nim kombinatory z plusem:
Elementy na tym samym poziomie
Następny kombinator który jest wart uwagi to “~”. W odróżnieniu od “+” pomaga wskazać wszystkie (a nie jeden) bratnie elementy HTML, na tym samym poziomie zagnieżdżenia.
Selektor:
wybierze wszystkie elementy “p”, będące na tym samym poziomie zagnieżdżenia co h1
Zobacz na naszym przykładzie zastosowanie kombinatora “~”:
Selektor do wszystkiego
Selektor “*” (gwiazdka) pozwala wskazać wszystkie elementy HTML na stronie. Warto dodać, że jest to dobra metoda jeśli chcemy pozbyć się na przykład konkretnego stylu na stronie internetowej.
W poniższym przykładzie sprawiłem że wszystkie elementy na stronie mają rozmiar tekstu 20px. Dodatkowo dodałem ramkę do każdego elementu na stronie:
To by było na tyle w kwestii kilku najważniejszych kombinatorów. Użytkowanie ich w swoich stylach zależy od waszego wyczucia i przede wszystkim doświadczenia którego z czasem nabierzecie.
Trochę czasu minęło od ostatniego materiału, ale miałem sporo spraw do nadrobienia. W kolejnym materiale, czyli w najbliższą środę, poruszę temat już wam częściowo znany – pseudoklasy. Trochę rozszerzymy i skupimy się bardziej na tym zagadnieniu.
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA