Live
x
<html> <head> <title>Pseudo klasy - nth-child</title> </head> <style> /* Wybieramy tegi <li> które są pierwszym dzieckiem jakiegokolwiek tagu */ li:first-child { font-weight: 600; font-size: 1.1em; } /* Wybieramy tag <li> będący pierwszym dzieckiem tagu <ul> z klasą "first" */ ul.first li:first-child { color: red } /* Wybieramy tag <li> będący ostatnim dzieckiem tagu <ul> z klasą "first" */ ul.first li:last-child { color: orange } /* Wybieramy jeden konkretny tag <li> (tutaj czwarty w kolejności) będący dzieckiem tagu <ul> z klasą "second" */ ul.second li:nth-child(4) { border: 3px solid black; } /* Wybieramy parzyste tagi (czyli co drugi tag) <li> będące dzieckiem tagu <ul> */ ul.second li:nth-child(even) { color: green; } /* Wybieramy nieparzyste tagi <li> będące dzieckiem tagu <ul> */ ul.second li:nth-child(odd) { color: brown } /* Możemy być bardziej specyficzni w wyborze korzystająć z matematyki. Zamiast jednej cyfry, "odd" lub "even" możemy wpisać formułę np. "2n+1", gdzie "n" jest automatycznie powiększaną liczbą naturalną zaczynając od zera. */ /* Zapis "2n" jest równoznaczny "even", czyli "co drugi element". */ ul.second li:nth-child(2n) { background: lightpink; } /* Wybranie co trzeciego elementu na <ul> o klasie "third".*/ ul.third li:nth-child(3n) { border: 2px solid black; } /* Wybranie elementów pasujących do równania (2n + 2), czyli: 2 * 0 + 2 = 2 (wybieramy drugi element) 2 * 1 + 2 = 4 (wybieramy czwarty element) 2 * 2 + 2 = 6 (wybieramy szósty element) itd... */ ul.third li:nth-child(2n + 2) { color: red; } /* Wybranie tylko pierwszych trzech elementów (-n + 3): -0 + 3 = 3 (wybieramy trzeci element) -1 + 3 = 2 (wybieramy drugi element) -2 + 3 = 1 (wybieramy pierwszy element) -3 + 3 = 0 (elementów zerowych i ujemnych już nie damy rady wybrać) */ ul.third li:nth-child(-n + 3) { background: lightgreen; } </style> <body> <section> <ul class="first"> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> </ul> <ul class="second"> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> <li>Element 5</li> <li>Element 6</li> </ul> <ul class="third"> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> <li>Element 4</li> <li>Element 5</li> <li>Element 6</li> </ul> </section> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.