El selector :only-child en CSS se usa para hacer coincidir cada elemento que es el único hijo de su padre. Representa un elemento sin hermanos.
Sintaxis:
:only-child {
// CSS property
}
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>:only-child selector</title>
<style>
h1 {
color: green;
text-align: center;
}
h2 {
text-align: center;
}
div:only-child {
color: white;
background: green;
}
div {
display: block;
margin: 6px;
font-size: 17px;
padding: 5px 8px;
border: solid 2px grey;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>:only-child selector</h2>
<div>
<div>I am an only child.</div>
</div>
<div>
<div>I am the 1st child.</div>
<div>I am the 2nd child.</div>
<div>I am the 3rd child, <div> Only
child of parent.</div></div>
</div>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>:only-child selector</title>
<style>
h1 {
color: green;
text-align: center;
}
h2 {
text-align: center;
}
li:only-child {
color: green;
}
li {
font-size: 20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>:only-child selector</h2>
<ol>
<li>Data Structures</li>
<ul>
<li>Arrays </li>
</ul>
<li>Languages</li>
<ul>
<li>C++ </li>
<li>Python</li>
</ul>
<li>Algorithms</li>
<ul>
<li>Searching Algorithms</li>
<li>Sorting Algorithms</li>
<ul>
<li>Bubble sort </li>
</ul>
</ul>
</ol>
</body>
</html>
Producción:
Navegador compatible: los navegadores compatibles con :only-child selector se enumeran a continuación:
- Google Chrome 4.0
- Internet Explorer 9.0
- Firefox 3.5
- Safari 3.2
- Ópera 9.6
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA