Selektory CSS 9. Selektory pseudoklas: typy i pusty element

W tej lekcji kontynuujemy temat selektorów pseudoklas. Poznamy selektory, które pozwolą nam na zaznaczenie elementu na podstawie jego pozycji wśród innych elementów tego samego typu.

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

Selektory pseudoklas: typy

Selektory, które dzisiaj poznamy są bardzo podobne do tych z poprzedniej lekcji, z tą różnicą, że teraz skupimy się na pozycji wśród dzieci tego samego typu, a nie dzieci elementów w ogóle.

Przykład

Weźmy jako przykład poniższy kod.

<div>
  <select></select>
  <div></div>
  <select></select>
  <button></button>	
</div>

Zakładając, że chcemy zaznaczyć drugi obiekt select, możemy zbudować selektor, który namierzy nam trzecie dziecko elementu div. Możemy też to zrobić wskazując drugi od końca element, który jest dzieckiem diva. A co jeżeli np. liczba elementów pomiędzy oboma elementami select nie jest stała? Wtedy możemy zbudować selektor, który wskaże nam element, który jest drugim dzieckiem danego typu, w typ wypadku select będący drugim dzieckiem swojego rodzica o tagu div. Możemy również powiedzieć, że chcemy znaleźć ostatnie (pierwsze od końca) dziecko danego typu. Te i kilka innych metod pokazuję na filmie.

Inne selektory

Pokażę Ci także dodatkowo jak zaznaczyć:

  • elementy, które są jedynymi dziećmi swojego rodzica,
  • elementy, które są jedynymi dziećmi danego typu swojego rodzica,
  • elementy, które są puste (nie mają ani dzieci, ani tekstu).

Wsparcie merytoryczne

Nie masz aktywnego członkostwa. Wykup dostęp albo Zaloguj się, by móc zadawać pytania.