css odd even child
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}css odd even child
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}nth-child() css
/* 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;
}css nth child
/* 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) { }scss second div 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 parentcss nth 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
}Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
