Calentito lo traigo de la W3c: Usar selectores Css como anchors o anclas 2.3.12

Calentito lo traigo de la W3c: Usar selectores Css como anchors o anclas

·Por Kseso ⧉ 2.3.12 ⚑ selectores css ✎ 0

Si de documentos del consorcio de la W3c hablamos, nada puede haber más novedoso y alejado de algo práctico que un "borrador no oficial". Y de eso va esta entrada.
La publicación del documento "Using CSS Selectors as Fragment Identifiers", bajo el epígrafe "Unofficial Draft" y con la nota de su status:

Este documento no es más que un borrador de trabajo público de una potencial especificación. No tiene ninguna posición oficial de ningún tipo y no representa el apoyo o consenso de cualquier organización de estándares.

Básicamente la propuesta consiste en utilizar los selectores Css como anchors o anclas. Esto es, enlaces con destino en el propio documento.
Actualmente para que un elemento sea el destino de un ancla hay dos formas de conseguirlo. O se utiliza el valor de su "id" o el del atributo "name" en los elementos /a/applet/frame/iframe/img/map/.

Ejemplos

Si queremos utilizar como destinos de las anclas una serie de párrafos, el marcado html sería algo como:


<div class="content">
   <p id="first">Neque porro quisquam est qui</p>
   <p id="second">dolorem ipsum quia dolor sit amet</p>
   <p id="third">consectetur, adipisci velit.</p>
</div>

Con semejante etiquetado sería tan sencillo enlazar al segundo párrafo como hacer:


http://example.com/lorem.html#second

Pero lo más lógico es encontrarse los párrafos sin id´s. Tampoco sería nada limpio, ni práctico, ni funcional, ni... llenar todo el html de id´s. Y otras veces hay situaciones en las que modificar el html no es posible. Así que tendríamos un marcado así:


<div class="content">
   <p>Neque porro quisquam est qui</p>
   <p>dolorem ipsum quia dolor sit amet</p>
   <p>consectetur, adipisci velit.</p>
</div>

En este escenario ¿cómo apuntar al segundo párrafo?. Aquí es donde aparece la propuesta de la que hablamos. Sólo sería construir el enlace como algo así:


http://example.com/lorem.html#css(.content:nth-child(2))

Y ya puestos, imaginemos un supuesto donde los contenidos del div no sean tan homogéneos. Supongamos una miscelánea de hijos de lo más dispar.
Pues nada, sólo es cuestión de elegir el selector apropiado. Algo así:


http://example.com/lorem.html#css(div[class~="content"]:nth-child(2))

Toda la información procede del documento del W3c "Using CSS Selectors as Fragment Identifiers", publicado bajo licencia Creative Commons Attribution 3.0.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.