English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:first-child pseudo-element-child CSS pseudo
Complete CSS Selector Reference Manual
class indicates the first element in a group of sibling elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
p:first-child
{
Matching the first <p> element of the parent element of <p>.-background
}
</style>
</head>
<body>
color:orange;/p>
<p>The first paragraph of the main content.</p>1<h/h1
<p>This paragraph is not the first child of its parent.</p>/p>
<div>
<p>This is the first paragraph contained within the Div.</p>
<p>This is not the first paragraph.</p>
</div>
<p><b>Notice:</b> :first-child applies to IE8and earlier versions of browsers, the DOCTYPE must have been declared.</p>
</body>
</html>Test and see ‹/›:first-The child selector matches the first child within its parent element.
The numbers in the table indicate the first browser version that supports this attribute.
| Selector | |||||
|---|---|---|---|---|---|
| :first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
Note: :first-child in IE8and must be declared in earlier versions of IE<!DOCTYPE>
CSS Tutorial: CSS Pseudo-classes
Select each <i> element within each <p> and set its style, where the <p> element is the first child of its parent element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
p:first-child i
{
background:yellow;
}
</style>
</head>
<body>
<p>I am a <i>strong/i> man. I am a <i>strong/i> man.</p>
<p>I am a <i>strong/i> man. I am a <i>strong/i> man.</p>
<p><b>Notice:</b> :first-child applies to IE8and earlier versions of browsers, the DOCTYPE must have been declared.</p>
</body>
</html>Test and see ‹/›The style selected for the first <li> element in the list:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
li:first-child
{
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<p><b>Notice:</b> :first-child applies to IE8and earlier versions of browsers, the DOCTYPE must have been declared</p>
</body>
</html>Test and see ‹/›The style selected for the first child of each <ul> element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>
<style>
ul>:first-child
{
background:yellow;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p><b>Notice:</b> :first-child applies to IE8and earlier versions of browsers, the DOCTYPE must have been declared.</p>
</body>
</html>Test and see ‹/›