English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:first-child CSS Pseudo-class zeigt den ersten Element in einer Gruppe von Brüdern an.
Vollständiges Referenzhandbuch für CSS-Selektoren
Passen Sie den ersten <p>-Element des ersten <p>-Elements des übergeordneten Elements an
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>/title>
<style>
p:first-child
{
background-color:orange;
}
</style>
</head>
<body>
<p>Der erste Abschnitt des Hauptinhalts.</p>
<h1>Willkommen auf meiner persönlichen Homepage</h1>
<p>Dieser Abschnitt ist nicht das erste Kind seines Elternelements.</p>
<div>
<p>Das ist der erste Absatz, der im Div enthalten ist.</p>
<p>Das ist nicht der erste Absatz.</p>
</div>
<p><b>Achtung:</b> :first-child auf IE8und ältere Browser-Versionen, der DOCTYPE muss bereits deklariert sein.</p>
</body>
</html>Testen Sie es heraus ‹/›:first-Der child-Selektor entspricht dem ersten Kind-Element im Elternelement.
Die Zahlen in der Tabelle geben die erste Browser-Version an, die das Attribut unterstützt.
| Selektor | |||||
|---|---|---|---|---|---|
| :first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
Hinweis: :first-child in IE8und frühere IE-Versionen müssen deklariert werden<!DOCTYPE>
CSS Tutorial: CSS Pseudo-Klasse
Wählen Sie jeden <i>-Element in jedem <p>-Element aus und stellen Sie seinen Stil ein, wobei das <p>-Element der erste Kind-Element seines Elternelements ist:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>/title>
<style>
p:first-child i
{
background:gelb;
}
</style>
</head>
<body>
<p>Ich bin ein <i>stark<i>/i> Mann. Ich bin ein <i>stark<i>/i> Mann.</p>
<p>Ich bin ein <i>stark<i>/i> Mann. Ich bin ein <i>stark<i>/i> Mann.</p>
<p><b>Achtung:</b> :first-child auf IE8und ältere Browser-Versionen, der DOCTYPE muss bereits deklariert sein.</p>
</body>
</html>Testen Sie es heraus ‹/›Stilauswahl für den ersten <li>-Element in der Liste:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>/title>
<style>
li:first-child
{
background:gelb;
}
</style>
</head>
<body>
<ul>
<li>Kaffee</li>
<li>Tee</li>
<li>Coca Cola</li>
</ul>
<ol>
<li>Kaffee</li>
<li>Tee</li>
<li>Coca Cola</li>
</ol>
<p><b>Achtung:</b> :first-child auf IE8und ältere Browser-Versionen, der DOCTYPE muss bereits deklariert sein.</p>
</body>
</html>Testen Sie es heraus ‹/›Stilauswahl für den ersten Kind-Element jeder <ul>-Element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grundlagen-Tutorial(oldtoolbag.com)</title>/title>
<style>
ul>:first-child
{
background:gelb;
}
</style>
</head>
<body>
<ul>
<li>Kaffee</li>
<li>Tee</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>Kaffee</li>
<li>Tee</li>
<li>Coca Cola</li>
</ul>
<p><b>Achtung:</b> :first-child auf IE8und ältere Browser-Versionen, der DOCTYPE muss bereits deklariert sein.</p>
</body>
</html>Testen Sie es heraus ‹/›