Selecting a Specific “Child” in CSS

Problem

You have multiple objects with the same class, but you want to change the css for specific one(s)

 

Solutions

/* Selects the second <li> element in a list */
li:nth-child(2) {
  color: #6557ff;
}

/* Selects every fourth element
   among any group of siblings */
:nth-child(4n) {
  color: #6557ff;
}

 

You can also include calculations in the parethesis, or specify even or odd values

/* Selects every odd element in a list */
li:nth-child(2n+1) {
  color: #6557ff;
}

li:nth-child(odd) {
  color: #6557ff;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *