tr:nth-child(even) {background: #CCC} tr:nth-child(odd) {background: #FFF}

css odd even child

/* Selects the second <li> element in a list */ li:nth-child(2) { color: lime; } /* Selects every fourth element among any group of siblings */ :nth-child(4n) { color: lime; }

nth-child() css

/* Select the first list item */ li:nth-child(1) { } /* Select the 5th list item */ li:nth-child(5) { } /* Select every other list item starting with first */ li:nth-child(odd) { } /* Select every 3rd list item starting with first */ li:nth-child(3n) { } /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) { } /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3) { }

css nth child

<section> <p>Little</p> <p>Piggy</p> <!-- Want this one --> </section> These will do the exact same thing: p:nth-child(2) { color: red; } p:nth-of-type(2) { color: red; } There is a difference though of course. Our :nth-child selector, in “Plain English,” means select an element if: It is a paragraph element It is the second child of a parent Our :nth-of-type selector, in “Plain English,” means: Select the second paragraph child of a parent

scss second div child

:nth-child(1) { /*advantage is you can do it for 2nd, 3rd etc. */ /* styles go here*/ }

css nth child

:nth-child(3) { //the number is the child number you are targeting //styles here }

css nth child

Similar Code Examples