Presentamos un listado de selectores de las CSS que puede que no conozcas y que resultan muy prácticos.
Las especificaciones de la W3C en cuanto a las Hojas de Estilo en Cascada no paran de crecer, eso nos da una idea de lo dinámicos que son los estándares y de la salud de los lenguajes con los que se construye la web. En este caso hacemos referencia a una especificación de Selectors Level 4 (http://dev.w3.org/csswg/selectors4) (Selectores de nivel 4) que no queremos que se confunda con CSS4, del que todavía no hay noticias en el momento de la publicación de este artículo. No existe confirmación alguna que se vaya a producir esa versión del lenguaje, aunque lo lógico será suponer que en algún momento se concrete.
Este artículo trata sobre selectores no tan usados en el día a día y que resultan prácticos para los desarrolladores. Pero antes sepamos qué son. Los selectores son patrones que hacen corresponder conjuntos de elementos en la jerarquía de etiquetas del HTML y nos sirven para seleccionar partes de un documento llamadas nodos. Son parte fundamental de CSS y aparte de en el lenguaje HTML, también se usan para seleccionar nodos en lenguajes como XML. Por medio de éstos, podemos definir a qué elementos se les aplican determinados estilos CSS.
La especificación de Selectores de nivel 4 de la que os hablamos en este texto nos da una referencia de los selectores que existen actualmente en CSS y algunos que quizás en el futuro deberían incorporarse en el lenguaje. Hay tanto selectores que se encuentran soportados por los navegadores actuales y pertenecientes a las CSS 1, 2 o 3, como otros que todavía no están disponibles para uso y quedan actualmente como mera curiosidad de lo que probablemente tendremos en un futuro. En esa especificación, de la cual hemos recuperado algunos "flashes", hay selectores para todos los gustos y utilidades diversas, nosotros te traemos unos pocos que quizás no son tan usados, pero que pueden ser prácticos.
1.- Negación con la pseudo-clase :not()
Esta pseudo-clase not() cuya referencia está en http://dev.w3.org/csswg/selectors4/#negation está presente en CSS3, pero en el borrador de los selectores nivel 4 hay algunas modificaciones que se han propuesto.
Es una especie de función para negar un selector dado, técnicamente le llaman "functional pseudo-classs" o pseudo-clase funcional, que recibe un partámetro que es el selector que se quiere negar. El resultado es que se accede a todos los selectores que no corresponden con aquel selector que se ha negado. Por ejemplo, si queremos seleccionar todos los botones que no están desactivados (no están "disabled"):
button:not([DISABLED])
Si tenemos un selector determinado llamado YYY (entendiendo ese YYY como cualquier selector, de etiqueta, class, identificador, etc) podemos seleccionar todos los elementos, menos los que seleccionaríamos con ese selector, con el código:
*:not(YYY)
La siguiente nserviría para seleccionar todos los elementos de la página HTML, excepto a los enlaces:
html|*:not(:link):not(:visited)
2.- La pseudo-clase :local-link
Esta pseudo-clase forma parte de la especificación de selectores de nivel 4 que hemos mencionado, encontrando la referencia en el borrador bajo el epígrafe
La estructura sería así:
nav :local-link { text-decoration: none; }
Pero además, podemos especificar diversas profundidades en los enlaces, entendiendo dichas profundidades como niveles en la ruta definidos por los directorios. La raíz del dominio tiene nivel cero, el primer directorio nivel 1 y así a continuación. De ese modo podemos definir las pseudo-clases como local-link(0) o local-link(1), para que solo apliquen a una profundidad determinada de enlaces dentro del mismo dominio. Para verlo más claro, tomemos en cuenta un ejemplo.
Vamos a suponer que estamos trabajando en un documento alojado en la ruta http://www.mipaginaweb.com/2020/11/ (fíjate que esta ruta, el camino completo y además en el número de directorios. Comprobarás que tendría dos niveles, por tener dos directorios. Fíjate que acaba en una barra). Ahora dentro del código HTML de ese documento tenemos los siguientes links o vínculos:
A) <a href="http://www.mipaginaweb.com">Contáctenos</a> B) <a href="http://www.mipaginaweb.com/2014">2014</a> C) <a href="https://www.mipaginaweb.com/2020/11">Noviembre</a> D) <a href="http://www.mipaginaweb.com/2020/11/">Noviembre</a> E) <a href="https://www.mipaginaweb.com/2020/12/">Diciembre</a> F) <a href="http://mipaginaweb.com/2018/10/30">30 de octubre</a>
Y sus estilos:
1) a:local-link {...}
2) a:local-link(0) {...}
3) a:local-link(1) {...}
4) a:local-link(2) {...}
5) a:local-link(3) {...}
6) a:local-link(4) {...}
- El primer link A) recibiría el Estilo 2), pues se le aplica el estilo de la profundidad cero
- El link B) recibiría el Estilo 2) y el 3)
- El link C) recibiría el estilo 2), 3), y 4)
- El link D) recibiría el estilo 1), 2), 3), 4) y 5) (Fíjate que es el mismo link del documento donde estaba este enlace y que además se diferencia con el link C) en que acaba en una barra.
- El link E) permanecería sin estilo, puesto que es una ruta en https:// siendo http:// la del documento actual.
- El link F) no tendría un estilo definido porque no empieza por las www.
- El estilo 6 no se aplica a ningún elemento.
3.- La pseudo-clase :checked
Otro ejemplo de selector, esta vez implementado desde CSS3 que recoge esta especificación es la pseudo-clase :checked http://dev.w3.org/csswg/selectors4/#checked-pseudo. Es útil para seleccionar los elementos checkbox que están seleccionados o como decimos a veces erróneamente, "checados".Para los elementos "checkbox" de nuestro HTML, podemos aplicar estilos dependiendo de si lo tenemos activado o no. Esto es bien sencillo. Si queremos seleccionar aquellos campos checkbox que tenemos activados para darles estilo, escribimos:
input:checked{
margin-left: 20px;
}
Como acabas de conocer el selector :not seguramente te hagas una idea de lo que tienes que hacer para conseguir aplicar estilos a aquellos checkbox que no están seleccionados:
:not(:checked)
4.- Selectores de atributos
Otros selectores que debes conocer son los selectores de atributos, que son una familia de selectores bastante grande y que daría seguro de que hablar para uno o varios artículos. La mayoría de estos selectores ya los venimos usando desde CSS2, algunos se incorporaron en CSS3 y otros todavía no se encuentran disponibles pero ya se están especificando en el W3C en el documento Selectors Level 4 en el epígrafe Attribute selectors http://dev.w3.org/csswg/selectors4/#attribute-selectors Veamos algunos ejemplos.
[att^="val"]
Selecciona un elemento cuyo atributo "att" tenga un valor comienza con "val". Si "val" fuera la cadena vacía, el selector no selecciona nada.
[att$="val"]
Selecciona un elemento con el atributo "att" cuyo valor termina con el sufijo "val". Si "val" es la cadena vacía, el selector no selecciona nada.
[att*="val"]
Selecciona un elemento con el atributo "att" cuyo valor contiene al menos una instancia de la subcadena "val". Si "val" es la cadena vacía, el selector no selecciona nada.
Ejemplos:
El selector siguiente selecciona un elemento INPUT cuyo valor en el atributo name comienza por "mi":
input[name^="mi"]
El selector siguiente representa un ancla HTML con un atributo "href" cuyo valor termina con ". html".
a[href$=".html"]
El selector siguiente representa un párrafo HTML con un atributo "title" cuyo valor contiene la subcadena "hola"
p[title*="hola"]
Hay otra serie de selectores de atributo que te pueden interesar y los cuales ya están disponibles para usar en todos los navegadores. Puedes ver la referencia en la especificación del W3C.
Como puedes ver, hay muchos selectores que puedes estar dejando pasar para atinar mejor en tus hojas de estilo.Puedes ver más novedades en el borrador aquí: www.w3.org/TR/2011/WD-selectors4-20110929.