Selektory CSS 8. Selektory pseudoklas: pozycja

W tej lekcji pokażę Ci selektory pseudoklas, które pomogą nam w zaznaczeniu elementów na podstawie ich pozycji względem rodzica.

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: pozycja

Może się zdarzyć, że dotychczas poznane selektory mogą nie wystarczyć w Twojej pracy albo mogą być mało wygodne. Wyobraź sobie np. szukanie określonej komórki w tabeli. Z dużym prawdopodobieństwem nie będą one miały żadnych atrybutów, po których można by je było namierzyć. Może się okazać, że nie będziemy ich w stanie też namierzyć po rodzeństwie czy rodzicu, bo budując taki selektor może zostać zaznaczona więcej niż jedna komórka w tabeli. Na szczęście możemy się posłużyć selektorami pseudoklas mówiącymi o pozycji danego elementu względem swojego rodzica.

Tabela

Weźmy na przykład poniższą tabelę. Mamy tutaj pola nagłówka w całym pierwszy wierszu. Polem nagłówka jest też każde pierwsze pole w kolejnych wierszach (czyli nazwy produktów).

<table>
   <thead>
      <tr>
         <th>Produkt</th><th>Cena jedn.</th><th>Ilość</th><th>Cena w sumie</th> 
      </tr>
   </thead>
   <tbody>
      <tr>
         <th>Miś</th><td>20 zł</td><td>2</td><td>40 zł</td> 
      </tr>
      <tr>
         <th>Rowerek</th><td>140 zł</td><td>1</td><td>140 zł</td> 
      </tr>
      <tr>
         <th>Gra edukacyjna</th><td>30 zł</td><td>3</td><td>90 zł</td> 
      </tr>
      <tr>
         <th>Lego Minecraft</th><td>90 zł</td><td>2</td><td>180 zł</td> 
      </tr>
   </tbody>
</table>

Powyższa tabela będzie wyglądać tak:

Produkt Cena jedn. Ilość Cena w sumie
Miś 20 zł 2 40 zł
Rowerek 140 zł 1 140 zł
Gra edukacyjna 30 zł 3 90 zł
Lego Minecraft 90 zł 2 180 zł

Powiedzmy, że chcemy zaznaczyć cenę jednostkową rowerka – jak możemy to zrobić? Żeby to zrobić za pomocą selektorów CSS możemy posłużyć się pozycją danego elementu.

Pozycja

By znaleźć cenę rowerka z powyższego przykładu możemy powiedzieć: znajdź mi drugą komórkę w drugim wierszu. Czyli najpierw musimy znaleźć drugi wiersz (czyli drugie dziecko <tbody>), a następnie wewnątrz tego wiersza musimy znaleźć jego drugie dziecko (<td>).

Selektory CSS umożliwiają znalezienie elementu na podstawie informacji, którym dzieckiem swojego rodzica ten element jest (podając indeks liczony od 1). Mało tego, możemy także podać jego pozycję licząc od końca. Są też osobne selektory, które znajdą pierwsze lub ostatnie dziecko swojego rodzica już bez podawania indeksu. Wszystkie te metody zobaczysz w filmie.

Wsparcie merytoryczne

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