El selector :only-of-type en CSS representa solo aquellos elementos que no tienen hermanos del tipo dado. Se utiliza para establecer la propiedad CSS en ese elemento.
Sintaxis:
:only-of-type {
// CSS property
}
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>:only-of-type selector</title>
<style>
h1 {
color:green;
}
body {
text-align:center;
}
p:only-of-type {
color:green;
font-size:25px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>:only-of-type selector</h2>
<div><p>Single child of its parent</p></div>
<div>
<p>Child 1 of its parent</p>
<p>Child 2 of its parent</p>
</div>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>:only-of-type selector</title>
<style>
h1 {
color:green;
}
body {
text-align:center;
}
input:only-of-type {
background-color:green;
border:1px solid black;
color:white;
text-align:center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>:only-of-type selector</h2>
<div>
<input type="text" value="Only child">
</div><br>
<div>
<input type="text" value="Child 1 of its parent">
<input type="text" value="Child 2 of its parent">
</div>
</body>
</html>
Producción:
Navegador compatible: los navegadores compatibles con :only-of-type selector se enumeran a continuación:
- cromo 4.0
- Ópera 9.6
- Firefox 3.5
- Internet Explorer 9.0
- Safari 3.2
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA