even child css – Selecting elements using CSS :nth-child() method

even child css – CSS :nth-child(n) selector matches only nth child element of its parent element.

even child css – CSS :nth-child() Selector

The:nth-child() selector in CSS is used to match the elements based on their position in a group of siblings. We can even select elements that are not really there.

p:nth-child(2) {
  background: red;
}

p:nth-child(odd) {
  background: red;
}

p:nth-child(even) {
  background: green;
}

Example

<ul>
    <li>Pakainfo</li>
    <li>Pakainfo</li>
    <li>Pakainfo</li>
    <li>Pakainfo</li>
    <li>Pakainfo</li>
</ul>

CSS Code

li {
    color: red;
}
li:nth-child(odd) {
    color: #3d3d3d;
}
li:nth-child(even) {
    color: pink;
}

select even child css

css odd even child

tr:nth-child(even) {background: #3d3d3d}
tr:nth-child(odd) {background: #c60000}

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;
}

Don’t Miss : How To Get Nth-Child Selector Using Jquery?

select odd child css
Selects only odd elements

li:nth-child(odd) { 
    color: pink;   
}

select even child css
/* Selects only even elements */

li:nth-child(even) { 
    color: blue;   
}

I hope you get an idea about even child css.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.