Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
:nth-of-type()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die:nth-of-type()CSSPseudoklasse wählt Elemente basierend auf ihrer Position unter Geschwistern des gleichen Typs (Tag-Name) aus.
Probieren Sie es aus
dt { font-weight: bold;}dd { margin: 3px;}dd:nth-of-type(even) { border: 2px solid orange;}<dl> <dt>Vegetables:</dt> <dd>1. Tomatoes</dd> <dd>2. Cucumbers</dd> <dd>3. Mushrooms</dd> <dt>Fruits:</dt> <dd>4. Apples</dd> <dd>5. Mangos</dd> <dd>6. Pears</dd> <dd>7. Oranges</dd></dl>Syntax
:nth-of-type(<An+B> | even | odd) { /* ... */}Parameter
Die:nth-of-type() Pseudoklasse wird mit einem einzigen Argument angegeben, das das Muster für die Zuordnung von Elementen darstellt.
Siehe:nth-child für eine detailliertere Erklärung der Syntax.
Beispiele
Einfaches Beispiel
HTML
<div> <div>This element isn't counted.</div> <p>1st paragraph.</p> <p>2nd paragraph.</p> <div>This element isn't counted.</div> <p>3rd paragraph.</p> <p>4th paragraph.</p></div>CSS
/* Odd paragraphs */p:nth-of-type(2n + 1) { color: red;}/* Even paragraphs */p:nth-of-type(2n) { color: blue;}/* First paragraph */p:nth-of-type(1) { font-weight: bold;}/* This will match the 3rd paragraph as it will match elements which are 2n+1 AND have a class of fancy.The second paragraph has a class of fancy but is not matched as it is not :nth-of-type(2n+1) */p.fancy:nth-of-type(2n + 1) { text-decoration: underline;}Ergebnis
Hinweis:Es gibt keine Möglichkeit, das nth-of-class mit diesem Selektor auszuwählen. Der Selektor berücksichtigt nur den Typ, wenn die Liste der Übereinstimmungen erstellt wird. Sie können jedoch CSS auf ein Element basierend auf der:nth-of-type Positionund einer Klasse anwenden, wie im obigen Beispiel gezeigt.
Spezifikationen
| Specification |
|---|
| Selectors Level 4 # nth-of-type-pseudo |