Targeting Specific Elements with Class Names: A CSS nth-Child Approach

Challenge: Selectively style elements with the same class name based on their position, regardless of their location in the markup.

Solution: Utilize nth-child() or nth-of-type() pseudo-selectors to target elements according to their ordinal position within a parent element.

nth-child() Pseudo-Selector

The nth-child(n) pseudo-selector allows you to style an element that is the nth child of its parent. For instance, to target the first element with class "myclass":

.parent_class:nth-child(1) {
  color: #000;
}

To target the second and third elements, use the following selectors:

.parent_class:nth-child(2) {
  color: #FFF;
}

.parent_class:nth-child(3) {
  color: #006;
}

nth-of-type() Pseudo-Selector

The nth-of-type(n) pseudo-selector functions similarly to nth-child(), but it selects elements based on their type within their parent. This is useful when you have multiple elements of the same type within a parent:

.myclass:nth-of-type(1) {
  color: #000;
}

.myclass:nth-of-type(2) {
  color: #FFF;
}

.myclass:nth-of-type(3) {
  color: #006;
}

Example HTML:

  
my text1
  

  
my text2
  

  
my text3