Zapisy otwarte! Dołącz do kursu Selenium w Javie lub Selenium w C#. Tylko do 23.09.2021 do godz. 21:00. Zapisz się tutaj.

Selenium 22. Selektory CSS: relacje między elementami

W tej lekcji pokażę Ci w jaki sposób nawigować się do dzieci w selektorach CSS, rodzeństwa i potomków innych elementów.

Przewodnik po selektorach CSS i XPath

Przy lekcjach dotyczących selektorów CSS i XPatha, a już szczególnie przy zadaniach, pomocny się może okazać przewodnik po selektorach CSS i XPath.

>> Dostaniesz go tutaj


Dzieci w selektorach CSS, to elementy znajdujące się bezpośrednio w hierarchii pod innym elementem. Weźmy pod uwagę poniższy przykład.

<div class="site-container">
	<ul>
		<li>Pierwszy element listy</li>
		<li>Drugi element listy</li>
		<li>Trzeci element listy</li>
	</ul>
	<header>
		<div class="wrap"></div>
	</header>
	<div class="site-inner">
		<section role="banner"></section>
		<div class="content-sidebar-wrap"></div>
	</div>
	<footer class="site-footer"></footer>
</div>

Weźmy pod uwagę najwyżej położony element o tagu div, czyli diva o klasie site-container. Jego dziećmi są elementy położone bezpośrednio pod nim w drzewie. Takich elementów mamy cztery: ul (lista), header (nagłówek), div oraz footer (stopka).

W selektorach CSS możliwe jest odniesienie się do potomka. Potomek różni się tym od dziecka, że nie musi (ale może) znajdować się bezpośrednio pod danym elementem. Wystarczy, że będzie pod nim w drzewie. Posłużmy się tym samym divem. Ustaliliśmy, że ma on czworo dzieci. Te dzieci są jednocześnie potomkami tego diva. Ale oprócz jego czterech dzieci w skład potomków elementu wchodzą także dzieci jego dzieci czyli również wszystkie trzy elementy listy (li), div w nagłówku, a także section oraz div w divie o klasie site-inner. Gdyby z kolei te elementy miały dzieci, to one też weszłyby do puli potomków i tak aż do ostatniego elementu, który już dzieci nie ma.

Warto tutaj zwrócić uwagę na to, że jeżeli chcemy wskazać np. wszystkich potomków elementu ul, to będą to jedynie widoczne pod nim elementy li. Na tym samym poziomie drzewa co ul, znajduje się też header, div o klasie site-inner oraz footer. Mają one wspólnego rodzica – diva o klasie site-container. O takich elementach mówimy, że są rodzeństwem, i tym rodzajem zależności również możemy się posłużyć w selektorach CSS.

Jeżeli chcesz sobie utrwalić materiał z tej lekcji, zajrzyj do posta na temat selektorów CSS.

Ukryta treść

Nie masz dostępu do tego kursu. Wykup dostęp albo zaloguj się, by móc zobaczyć pełną lekcję.

Wsparcie merytoryczne

Nie masz dostępu do wsparcia merytorycznego dla tego kursu. Wykup dostęp albo zaloguj się, by móc zadawać pytania.