La :only-childpropiedad de selector de pseudoclase en CSS representa un elemento que tiene un elemento padre y cuyo elemento padre no tiene otros elementos secundarios. Este sería el mismo que :first-child:last-childo :nth-child(1):nth-last-child(1), pero con una especificidad menor.
div p:only-child ( color: red; )Por ejemplo, si anidamos párrafos dentro de un me gusta ...
This paragraph is the only child of its parent
This paragraph is the first child of its parent
This paragraph is the second child of its parent
Ahora podemos diseñar el único
de nuestro primer hijo . El subsiguiente y sus hijos nunca tendrán estilo ya que el contenedor padre contiene más de un hijo (es decir, las etiquetas p).
p:only-child ( color:red; )También podríamos mezclar pseudoclases adicionales como este ejemplo que selecciona el primer párrafo dentro de nuestro div anidado y el único hijo de div.contain.
Hello World
some more children
div.contain div:only-child :first-child ( color: red; ):only-childno funcionará como selector si su elemento padre contiene más de un hijo con una etiqueta idéntica. Por ejemplo…
paragraph1
paragraph2
paragraph1
paragraph2
paragraph1
paragraph2
div.contain div:only-child ( color: red; )Esto dará como resultado que ningún div herede el color rojo, ya que el padre contiene más de 1 hijo (los 3 divs sin nombre).
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 4 | 3,5 | 9 | 12 | 3.2 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |