CSS erstklassig
Der CSS-Selektor :first-of-type wird verwendet, um das erste Element seines Typs in einer Gruppe von Elementen auszuwählen. Wenn Sie beispielsweise eine Gruppe von Absätzen haben, wählt der Selektor :first-of-type den ersten Absatz in der Gruppe aus.
Dieser Selektor wird häufig in Verbindung mit anderen Selektoren verwendet, wie z. B. dem untergeordneten Selektor, um bestimmte Elemente auszuwählen. Der folgende Code wählt beispielsweise den ersten Absatz im ersten div-Element auf der Seite aus:
div:first-child > p:first-of-type {
/* CSS code */
}
Was ist CSS First of Class
CSS-Selektoren wählen die Elemente aus, die Sie formatieren möchten.
Der grundlegendste Selektor ist der Elementselektor, der verwendet wird, um ein Element anhand seines Tag-Namens auszuwählen. Beispielsweise wählt der Elementselektor p alle <p>-Elemente auf der Seite aus.
Der Klassenselektor wird verwendet, um ein Element anhand seines Klassennamens auszuwählen. Beispielsweise wählt der Klassenselektor .example alle Elemente mit der Klasse example aus.
Der ID-Selektor wird verwendet, um ein Element anhand seiner ID auszuwählen. Beispielsweise wählt der id-Selektor #example das Element mit der id = "example" aus.
Um den ersten Teil mit der Klasse example auszuwählen, würden Sie den CSS-Selektor example: first verwenden.
Das erste Element mit einem Klassenselektor wird verwendet, um das erste Element mit der angegebenen Klasse auszuwählen. Wenn Sie beispielsweise das erste <p>-Element mit der Klasse test formatieren möchten, würden Sie das erste Element mit einem solchen Klassenselektor verwenden.
p.test:first-child {
Das erste Element mit einem Klassenselektor ist von Vorteil, wenn Sie das erste Element mit einer bestimmten Klasse anders gestalten möchten als die anderen Elemente mit dieser Klasse. Dies wird häufig verwendet, um das erste Element in einer Liste anders als die anderen Listenelemente zu gestalten.
Beispielcode:
<head>
<style>
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
</style>
</head>
<body>
<div>
<p>This text is selected!</p>
<p>This text isn't selected.</p>
</div>
<div>
<h2>This text isn't selected: it's not a `p`.</h2>
<p>This text isn't selected.</p>
</div>
</body>
Implementieren Sie CSS First of Class
Sie können CSS First of Class auf verschiedene Arten implementieren.
Die gebräuchlichste Methode besteht darin, den CSS-Code einfach vor jedem anderen Code in Ihrem HTML-Dokument einzufügen. Dadurch wird sichergestellt, dass der CSS-Code zuerst geparst wird und Vorrang vor jedem anderen Code hat.
Eine andere Möglichkeit, CSS erstklassig zu implementieren, ist die Verwendung einer externen CSS-Datei.
Wenn Sie CSS verwenden, müssen Sie zunächst das Element auswählen, das Sie formatieren möchten. Sie können die id, class oder tag des Elements verwenden.
Nachdem Sie das Element ausgewählt haben, können Sie es mit den CSS-Eigenschaften formatieren. Beispielsweise können Sie die Eigenschaft color verwenden, um die Farbe des Elements zu ändern, oder die Eigenschaft font-size, um die Größe der Schriftart des Elements zu ändern.
Beispielcode:
<html>
<head>
<style>
p:first-of-type {
background: red;
}
</style>
</head>
<body>
<p>The first paragraph</p>
<p>The second paragraph</p>
<p>The third paragraph</p>
<p>The fourth paragraph</p>
</body>
</html>
Abschluss
Es gibt mehrere Möglichkeiten, das erste Element mit einer Klasse auszuwählen, aber die Verwendung des CSS-Selektors first-child ist die gebräuchlichste. Dieser Selektor wählt das erste Element eines beliebigen Typs aus, das ein untergeordnetes Element des von Ihnen ausgewählten Elements ist.
Wenn Sie eine Liste von Elementen haben und das erste Element mit der Klasse item auswählen möchten, würden Sie den CSS-Selektor ul > li:first-child verwenden. Von diesem Blog aus können Sie also in erster Linie vollständige Informationen über CSS erhalten.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn