5.1.1.

04 junio 2005

:only-child. Testeando el selector de CSS3 en Deer Park Alpha 1

Categoría
Este post es experimental. Para verlo completo se necesita un navegador medianamente moderno —puedo confirmar que funciona en Opera 8 y en Firefox 1.0.4— y los ejemplos de momento sólo funcionan en Deer Park Alpha 1.

No soy un avanzado de CSS como para esperar encontrar errores en la implementación de este selector pero eso no quita que es divertido probarlo contra casos bastante básicos. Por si alguien no se dio cuenta, :only-child se usa para seleccionar aquellos elementos que no tienen hermanos.

Prueba básica

p:only-child {background:red}

<body>
 <p>Texto sin sentido</p>
</body>

P, más allá de su contenido, sigue siendo el único hijo de BODY por lo que debería poder ser seleccionado. Como era de esperarse, P muestra fondo rojo. Demostración de Prueba básica.

Prueba básica 2

Como dije antes, el contenido de un elemento no afecta su condición de hijo único.

ul:only-child {background:red}

<body>
 <ul>
  <li>Item 1
  <li>Item 2
  <li>Item 3
 </ul>
</body>

Demostración de Prueba básica 2

Elementos anónimos

em:only-child {background:red}

<p>Esto es texto común pero 
 <em>éste tiene énfasis</em>
</p>

Mi error. Pensé que el texto fuera de EM contaría como otro elemento pero no es así. En realidad ni siquiera se trata de un elemento anónimo sino de una caja en línea —inline box— anónima. Cita de Anonymous inline boxes (Visual formatting model en CSS 2):

The P generates a block box, with several inline boxes inside it. The box for emphasized is an inline box generated by an inline element (EM), but the other boxes (Some and text) are inline boxes generated by a block-level element (P).

Demostración de Elementos anónimos

El elemento HTML

html:only-child {background:red;}

El elemento HTML no es hijo de nadie por lo que no puede ser seleccionado.

Demostración de El elemento HTML

Hermanos con ::after (o ::before)

body::after {content:"Hola mundo"}
p:only-child {background:red}

<body>
 <p>Texto sin sentido</p>
</body>

::after y ::before crean al pseudo elemento dentro del elemento seleccionado; en este caso, dentro de BODY, por lo que P ya no debería ser hijo único.

Mi error nuevamente. El selector se basa en los elementos declarados en el DOM. Cita de What's New in Deer Park Alpha en Mozilla.org:

CSS3 :only-child
This CSS3 selector allows selecting an element that has no other elements as siblings in the DOM.

Sumado a que a ::before y ::after no afectan al DOM. Cita de Adding Generated Content in CSS2 en Javascript Kit.

Generated content is not considered actual content, and hence doesn't alter the document tree, for those of you who work with the DOM.

Y por si falta más, el mismo DOM Inspector de Firefox muestra que no existe otro elemento más que P.

Demostración de Hermanos con ::after (o ::before).

Único hijo con ::after (o ::before)

body::after:only-child {content:"Hola mundo";background:red}

Por todo lo explicado antes, esta declaración tampoco tendria efectos.

Conclusión

No hay mucho más. Es un selector bastante simple por lo que no creo que logren sacarle algún error. Por cierto, según el módulo CSS3 Selectors una forma de emular a only-child es usar :first-child:last-child. Claro que Opera no soporta last-child. ¡Opera! ¡Ponete las pilas, por favor!

Powered by Blogger