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).