El selector :first-child se usa para seleccionar aquellos elementos que son los elementos del primer hijo. Para :first-child selector, se debe declarar <!DOCTYPE> para IE8 y versiones anteriores.
Sintaxis:
:first-child {
// CSS property
}
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>first child selector</title>
<style>
h1 {
color:green;
}
p:first-child {
background-color: green;
color:white;
font-weight:bold;
}
body {
text-align:center;
}
</style>
</head>
<body>
<p>GeeksforGeeks</p>
<h1>GeeksforGeeks</h1>
<h2>:first-child Selector</h2>
<p>GeeksforGeeks</p>
<div>
<p>GFG</p>
<p>Geeks</p>
</div>
</body>
</html>
Producción:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>first child selector</title>
<style>
h1 {
color:green;
}
h1, h2 {
text-align:center;
}
li:first-child {
background: green;
}
body {
width:70%;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>:first-child Selector</h2>
<ul>
<li>Data Structure</li>
<li>Computer Network</li>
<li>Operating System</li>
</ul>
<ol>
<li>Java</li>
<li>Ruby</li>
<li>Pascal</li>
</ol>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con :first-child selector se enumeran a continuación:
- Apple Safari 3.1
- Google Chrome 4.0
- Firefox 3.0
- Ópera 9.6
- Internet Explorer 7.0
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA