Kann CSS „nth-of-type' Elemente basierend auf einer bestimmten Klasse auswählen?

Kann CSS 3 n-tel-Typ auf eine Klasse beschränkt werden?

In CSS 3 kann der n-tel-Typ-Selektor verwendet werden um bestimmte Elemente basierend auf ihrer Position innerhalb einer Gruppe ähnlicher Elemente auszuwählen. Dieser Selektor ermöglicht jedoch kein Targeting von Elementen basierend auf ihrer Klasse.

Frage:

Ist es möglich, nth-of-type auf eine bestimmte Klasse anzuwenden? Wie können Sie beispielsweise jedes dritte Element mit der Klasse .module ansprechen?

Antwort:

Leider bietet CSS kein integriertes nth-of- Klassenselektor. Dies bedeutet, dass es nicht direkt möglich ist, nth-of-type auf eine bestimmte Klasse zu beschränken.

Lösung:

Um den gewünschten Effekt zu erzielen, können Sie einen neuen anwenden Klasse manuell in jedes dritte .Modul eintragen. Dies kann mit JavaScript oder einem Präprozessor wie Sass erfolgen.

Hier ist ein Beispiel mit JavaScript:

const modules = document.querySelectorAll('.featured.module');
for (let i = 2; i < modules.length; i += 3) {
  modules[i].classList.add('module--nth-of-type-3n');
}

Sobald die zusätzliche Klasse angewendet wurde, können Sie die folgende CSS-Regel zum Targeting verwenden jedes dritte .module:

.featured.module.module--nth-of-type-3n {
  /* Your desired styling here */
}

Diese Problemumgehung ist zwar möglicherweise nicht so elegant wie ein dedizierter N-Klassen-Selektor, ermöglicht es aber Sie können mithilfe vorhandener CSS-Funktionen und JavaScript die gewünschte Funktionalität erreichen.

Das obige ist der detaillierte Inhalt vonKann CSS „nth-of-type' Elemente basierend auf einer bestimmten Klasse auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!