Targeting auf bestimmte Elemente mit Klassennamen: Ein CSS-Ansatz für n-te untergeordnete Elemente

Herausforderung: Stilisieren Sie selektiv Elemente mit demselben Klassennamen basierend auf ihrem Position, unabhängig von ihrer Position im Markup.

Lösung: Nutzen nth-child() oder nth-of-type() Pseudo-Selektoren, um Elemente entsprechend ihrer Ordnungsposition innerhalb eines übergeordneten Elements anzusprechen.

nth-child() Pseudo-Selektor

Der Mit dem Pseudoselektor „nth-child(n)“ können Sie ein Element formatieren, das das n-te untergeordnete Element seines übergeordneten Elements ist. Um beispielsweise das erste Element mit der Klasse „myclass“ anzusprechen:

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

Um auf das zweite und dritte Element abzuzielen, verwenden Sie die folgenden Selektoren:

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

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

nth-of-type() Pseudo-Selector

Der nth-of-type(n)-Pseudoselektor funktioniert ähnlich wie nth-child(), wählt jedoch Elemente basierend auf aus ihren Typ innerhalb ihres Elternteils. Dies ist nützlich, wenn Sie mehrere Elemente desselben Typs in einem übergeordneten Element haben:

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

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

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

Beispiel-HTML:

  
my text1
  

  
my text2
  

  
my text3