Sabemos que el CSS3, es una de las últimas versiones de hojas de estilo en cascada o (Cascading Style Sheets), que nos permite diseñar páginas web de una manerra más dinámica, permitiendo realizar diferentes tipos de animaciones y agregar una gran cantidad de elementos estéticos, sin afectar la velocidad de carga de las páginas.
Con CSS3 es posible lograr efectos que antes sólo se conseguían con determinados programas gráficos como Photoshop, Illustratot y demás, tales como sombras, degradados y un sin número de recursos, que actualmente se consiguen de una manera rápida, a través de código.
recordemos que los selectores son patrones que hacen corresponder a determinados conjuntos de elementos en la jerarquías de etiquetas de HTML que principalmente nos permite seleccionar la parte del documento que deseamos, a través de lo que conocemos como nodos, mediante los cuales definimos a que elementos se les aplica determinados estilos definidos en el css.
Las especificaciones de la W3c referente al CSS no paran de evolucionar, lo que nos da una idea de la calidad de los lenguajes y el dinamismo de los estándares con los que se construye un sitio web. A continuación daremos a conocer un listado de selectores de las CSS que puede que no conozcas y que resultan muy prácticos, todo esto basado en una referencia de Selectors Level 4 (http://dev.w3.org/csswg/selectors4) (Selectores de nivel 4).
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 servirí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 The local link pseudo-class :local-link http://dev.w3.org/csswg/selectors4/#local-link-pseudo Se utiliza para aplicar cualquier propiedad CSS, pero solo a los enlaces que sean locales al documento donde estamos trabajando.
Nota: Ojo que esta clase es para enlaces que vayan a este mismo documento, lo que se conocería como enlaces internos en la misma página. Pero también lo podemos hacer para enlaces que vayan a otras partes de este dominio, lo que te puede resultar útil para diferenciar el estilo CSS de los enlaces internos (a tu dominio) y los enlaces a otros dominios externos.
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.
Créditos: desarrolloweb.com
