Selectores CSS Nivel 4 Para Tener En Cuenta

Spanish (Español) translation by CYC (you can also view the original English article)

Ya es hora de que aprendamos un nuevo CSS, ¿no?

Todos estamos acostumbrados a las nuevas características que se están introduciendo en los marcos izquierdo y derecho, pero a menudo olvidamos que las nuevas características se están desarrollando constantemente en los idiomas web principales que usamos todos los días.

Proyecto de Redacción de la W3C

Los Selectores CSS Nivel 4 Para Tener En Cuenta describirán un gran salto en las características CSS desde el 15 de enero.

Antes de que comencemos, debes saber que el CSS que encuentras en este artículo, hoy, no funcionará en gran medida en cualquier navegador. Incluso en el más nuevo de lo nuevo. La razón de esto es que el proyecto es exactamente eso: un proyecto. Esta es la cuarta versión del proyecto de selectores de nivel 4, que comenzó en 2011. Los selectores sugeridos en el proyecto son una especificación para nuevos selectores que están siendo sugeridos por los editores del propio documento, a través de mucha deliberación y colaboración con personas de la comunidad que participan en la lista de correo del W3C.

Entonces, ¿qué significa esto? Esto significa que en un futuro relativamente próximo, es probable que veamos muchas de estas características implementadas, y muchas serán entregadas en versiones de desarrollo de navegadores como Chrome y Firefox.

¡Echemos un vistazo a algunos de los nuevos selectores!

1. :not(.warning, .alert)

Ya hemos visto antes el selector :not en los selectores de nivel 3. Sin embargo, el proyecto actual del nivel 4, el selector :not permite múltiples argumentos con una coincidencia más compleja.

Anteriormente, :not sólo se podía utilizar con un solo selector y no se podía combinar. Por ejemplo, en el nivel 3 :not podría verse así:

1	a:not([href*="somesite.com"]) {
2
3	}

Esto elegiría todas las etiquetas de anclaje que no tuvieran una href incluyendo la cadena "somesite.com". Pero con el nuevo borrador, podemos hacer cosas más interesantes.

Cubriremos :has pero por ahora, aquí hay un selector que selecciona todos los enlaces que no son descendientes directos de elementos con una clase col o una clase que comienza con col (como las clases de cuadrícula de Bootstrap, col-md-4). También ignorará las anclas que tienen elementos img como descendientes.

1	a:not([class\|="col"]>a, :has(img)) {
2
3	}

Este selector también nos permite hacer cosas como:

1	div:not(div+div) {
2
3	}

Esto selecciona todos los divs que no son hermanos próximos-en-la-fila de otras divs.

Tomándolo Aún Más

Con la adición de la pseudo-clase nth-last-child también podemos hacer cosas como esta:

1	div:not(.container>div:nth-last-child(-n+2)) {
2
3	}

Esto seleccionaría todas las divs excepto aquellas que son descendientes directos de los elementos .container y son los dos últimos hermanos.

Como puedes ver, estas reglas pueden ser muy poderosas y complejas; pero vamos a añadir aún más flexibilidad en la mezcla mediante la introducción del pseudo selector :has.

2. :has(div, p, > a)

El pseudo-selector :has te permite seleccionar elementos que tienen los argumentos pasados como hijos. Por ejemplo, para seleccionar todos los vínculos de anclaje que tienen elementos de imagen hijos, deberías utilizar la siguiente sintaxis

1	a:has(img) {
2
3	}

Sin embargo, :has no se limita a los selectores simples. Tú puedes combinar :has con :not y :nth-* para crear selectores relacionales bastante complejos.

Por ejemplo, vamos a seleccionar los elementos table que tienen más de diez filas.

1	table:has(tr:nth-of-type(11)) {
2
3	}

Combinación de :has() y :not()

¿Qué tal si se selecciona un elemento de body cuyo último elemento hijo no es un pie de página?

1	body:not(:has(footer:last-child)) {
2
3	}

3. :any-link

Actualmente podemos apuntar hipervínculos utilizando :link y :visited Esto va más allá del simple uso del selector a, ya que comprueba la presencia de href, y verifica el historial de navegación del usuario para determinar si se ha visitado un enlace determinado.

1	:link, :visited {
2	color: blue;
3	}

Con los selectores de nivel 4 propuestos podríamos diseñar todos los enlaces, visitados o no, usando :any-link. El estilo anterior es relativamente equivalente a:

1	:any-link {
2	color: blue;
3	}

4. :scoped

Hasta en los selectores de nivel 4, el CSS tiene un alcance global. En otras palabras, si agregas los siguientes CSS:

1	div {
2	color: #444;
3	}

todos los divs recibirán la regla de estilo color: #444. (Esto supone que no se aplican otros estilos de competencia). Los selectores de nivel 4 permiten que las hojas de estilo y las etiquetas de estilo tengan un ámbito en un elemento:

<section>
  <h2>This is outside the scope.</h2>
  <aside>
    <style scoped>
      h2 {
        font-size: 2rem;
      }
    </style>
    <h2>This is within the scope</h2>
  </aside>
</section>

En este ejemplo, hemos aplicado un ámbito a una etiqueta de estilo dentro del elemento aside. Las reglas de esta etiqueta de estilo sólo se aplicarán a los descendientes del elemento principal del style.

5. :matches(selector1, selector2)

El pseudo selector :matches nos permite comprobar si un elemento coincide con una lista de elementos. Por ejemplo, si deseas orientar todas las variables de anclaje, párrafo y h2 dentro de un artículo, puedes lograrlo con lo siguiente:

1	article :matches(h2, a, p) {
2
3	}

Esto reemplaza la sintaxis anteriormente mucho más detallada:

1	article a, article h2, article p {
2
3	}

Nota: A partir de esta versión del proyecto, :matches() no puede utilizarse con :not, :has, u otro :matches anidado.

6. Selector de Descenso Explícito `>>`

Probablemente estés familiarizado con el carácter de espacio que nos permite escribir reglas descendientes, como todas las anclas dentro de un div:

1	div a {
2
3	}

Pero hasta ahora no hemos visto un selector explícito de descendientes. Con los selectores nivel 4 tenemos una: >>.

Sin embargo, ten en cuenta que esto resulta en un carácter extra innecesario en tu CSS, ya que puedes lograr el mismo efecto con un solo espacio de caracteres, así que ten cuidado al usarlo. Probablemente, actúa como un puente entre el selector hijo inmediato, >, y el selector de acceso shadow-dom, >>>.

7. Selector de Tabla en la Columna `||`

Este selector es una adición bienvenida para el estilo de la tabla. Echemos un vistazo a algunos márgenes para una tabla básica:

1	<table>
2	<colgroup>
3	<col class="id">
4	<col class="personnel-info" colspan="2">
5	</colgroup>
6	<tr>
7	<th>ID</th>
8	<th>Name</th>
9	<th>Email</th>
10	</tr>
11	<tbody>
12	<tr>
13	<td></td>
14	<td></td>
15	<td></td>
16	</tr>
17	<tr>
18	<td></td>
19	<td></td>
20	<td></td>
21	</tr>
22	<tr>
23	<!-- etc -->
24	</tr>
25	</tbody>
26	</table>

Los elementos de estilo horizontalmente agrupados (es decir: dentro de la misma fila) han sido históricamente algo sencillo de lograr. Los elementos de estilo agrupados verticalmente es otro juego de pelota.

Con el fin de darle estilo a todos los elementos que forman parte de la columna con la clase personnel-info, podríamos agregar más clases al marcado y estilo de ellas directamente, o, mirando hacia los selectores de nivel 4, podríamos usar el selector ||. El selector || te permite apuntar a los elementos td de la siguiente manera:

1	.personnel-info \|\| td {
2
3	}

Conclusión

¡Esto concluye nuestro resumen de algunas de las nuevas características que vienen en los selectores de nivel 4! Estos potentes y nuevos conjuntos de herramientas de ahorro de bytes no están completamente bloqueados, pero los navegadores están empezando a implementarlos de forma temprana y experimental, así que debes estar atento a las actualizaciones de la especificación. Por supuesto que cuando se formalicen, los cubriremos aquí en Tuts+!

Enlaces Relevantes

Echa un vistazo a nuestro curso sobre el CSS del Futuro, donde Craig Campbell cubre, entre otras cosas: