#36. Złożone kombinatory

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 > p

wskaż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😉

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

elegant-euclid-thdul

elegant-euclid-thdul by danielminschinski

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

adoring-chatterjee-jd65e

adoring-chatterjee-jd65e by danielminschinski

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 “~”:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

great-davinci-lr53c

great-davinci-lr53c by danielminschinski

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

magical-mountain-mm5fl

magical-mountain-mm5fl by danielminschinski

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

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!