El selector CSS (Cascading Style Sheet) es el nexo de unión entre la hoja de estilos y los documentos a los que se aplique dicha hoja. Ya sean (x)HTML, XLM, SVG... y con independencia del medio en que se muestre (media type).
Del conocimiento y buen manejo que se haga del selector CSS dependerá la eficiencia de la hoja de estilos y en muchos casos el poder lograr lo deseado sin necesidad de recurrir a otros lenguajes.
Un detalle más que significativo de su importancia del selector en CSS lo da el hecho de que hemos pasado de tener unos 20 selectores en CSS2 a más de 70 en el último documento en discusión.
El selector CSS es el identificador en la hoja de estilos del elemento o elementos del DOM a los que se aplicarán las declaraciones contenidas en la regla de la que forma parte dicho selector.
Como curiosidad, en algunas partes, al elemento del DOM al que aplica el selector CSS se le llama sujeto del selector.
El término selector CSS puede referirse por igual a cualquiera de los cuatro tipo de selectores CSS que existen clasificados por la composición de su nombre: a un selector CSS simple a un selector CSS compuesto a un selector CSS complejo a una lista de selectores CSS
Tipos de selectores CSS por su composición
Selector CSS simple Un selector simple es aquel que está formado solo por una única cadena textual, sin ningún combinador. Son selectores simples el selector universal *, el selector por tipo de elemento del DOM div | p | article..., el selector de ID # y de clase ., el de atributo, el de pseudoclase : y el de pseudoelemento :: (notación actual). En la notación antigua o clásica de CSS2 los pseudoelementos también se representan como las pseudoclases :.
Los combinadores son signos intercalados entre selectores simples para acotar o hacer más preciso el alcance del selector. Estos combinadores son el espacio en blanco, los signos + | ~ | > entre otros.
Selector CSS compuesto El Selector compuesto es una cadena de selectores simples sin combinadores (el espacio en blanco también queda excluido porque es un combinador):
section.noticias {} .una_clase.otra_clase {}
Entre los selectores CSS compuestos también están incluidos los que tienen un selector de pseudoclase CSS en su nombre:
a:hover {} input:checked {} .mi_clase:last-child {}
Selector CSS complejo El «Selector complejo» es una secuencia o cadena de selectores separados por «combinadores». p span {} nav > a {} main:hover > h1 ~ p {}
Lista de selectores CSS Una «lista de selectores» la conforman dos o más selectores de cualquier tipo separados por una coma , #unico, main:hover > h1, ol > li:only-child {}
Combinadores de selectores CSS
Los combinadores CSS son signos gráficos, o caracteres especiales, o palabras o expresiones reservadas utilizados en el nombre del selector para formar los selectores CSS complejos. Estos selectores CSS aumentan precisión del selector al relacionar varios de ellos en función de que cumplan alguna condición (que es la definida por el combinador).
Combinador CSS de descendiente: ' ' (espacio en blanco) o '>>' En el documento sobre los selectores de nivel 4 se introduce el nuevo combinador >> equivalente al espacio en blanco.
El espacio en blanco o el doble >> separando el nombre de dos selectores CSS se utiliza para apuntar a elementos contenidos dentro de otro en el DOM del documento. a b {} o a >> b {} selecciona a todos los elementos b contenidos (dentro) de a sin importar la profundidad o los descendientes interpuestos entre 'a' y 'b'.
Combinador CSS de hijo directo '>' a > b {} Solo aplica a los elementos 'b' contenidos directamente en 'a' ('b' es hijo directo de 'a').
Combinador CSS de hermano posterior '~' a ~ b {} El signo '~' en el selector obliga a que 'b' sea hermano de 'a' (estén ambos contenidos directamente en el mismo elemento). No importa que en el html entre ambos haya otros elementos hermanos interpuestos.
h2 ~ p {}
<article> <h2>título</h2> <p>texto del primer párrafo</p> <img src='... /> <p>texto de otro párrafo</p> </article>
El selector CSS del código previo h2 ~ p {} afecta por igual a los dos párrafos ya que ambos son hermanos posteriores del título (h2): están contenidos directamente en el mismo elemento html, ambos (el título y los párrafos) tienen al article como padre.
Combinador de hermano posterior adyacente '+' a + b {} Representado por el signo '+' selecciona, al igual que el anterior, cada elemento 'b' que sea hermano de un 'a' y además estén adyacentes: 'b' tiene que aparecer en el DOM inmediatamente después de cerrar 'a', no puede haber ningún otro hermano que los separe o se interponga entre ellos.
En el bloque de código anterior si el combinador CSS en vez de ser el de hermano posterior ~ es el de hermano posterior adyacente h2 + p {} solo el primer párrafo (el que sigue al h2) se vería afectado por la regla CSS.
Observa que al referirme a los combinadores CSS de hermanos incluyó la expresión «hermano posterior» ya que CSS no puede (de momento) remontar el DOM. Esto es, siempre serán elementos 'contenidos en' o 'posteriores a'. Nunca al "contenedor de" o al "precedente de".
Combinador CSS de namespace '|' y qualified names La barra vertical '|' se emplea para acotar el sujeto del selector al espacio de nombres () indicado. La especificación tiene su documento (status W3c Recomendation) específico para este tema: "CSS Namespaces Module" y los "nombres CSS calificados".
@namespace misitio "http://misitio.dominio.ext";
misitio|A <span>representa el nombre A en el namespace http://misitio.dominio.ext</span>
Nota: La especificación no incluye en este apartado de los combinadores al de namespace.
Combinador CSS de referencia '/ref/' A título informativo. El documento sobre los selectores de nivel 4 introduce este selector. label:matches(:hover, :focus) /for/ input {}
"El combinador /ref/" en el código anterior apunta al input al hacer :hover o :focus en su etiqueta (label). Lo vincula por el atributo 'for'.
Combinador CSS /deep/ para iluminar las sombras
"El combinador /deep/" es de reciente formulación. Concebido para poder apuntar a los elementos creados o incluidos en el shadow DOM.
Nota: Chrome retiró recientemente el soporte a este combinador.
Combinador de columna ||
El combinador de columnas || (representado por dos barras verticales), nuevo en el doc Selectores de nivel 4, selecciona las celdas pertenecientes a una columna dada. En caso de que una celda ocupase 2 o más columnas diferentes se verá afectado por cualquiera de estas.
col.selected || td { background: gray; color: white; font-weight: bold; }
<table> <col span="2"> <col class="selected"> <tr><td>A <td>B <td>C <tr><td colspan="2">D <td>E <tr><td>F <td colspan="2">G </table>
El selector col.selected || td afecta a las celdas C, E, y G.
Identificando al sujeto del selector CSS
De forma general, se puede decir que el sujeto del selector (o elementos del DOM a los que apunta) es el último selector simple que aparece, en la cadena que lo conforma, antes del corchete de apertura del bloque de declaraciones y de cada coma ',' si es una lista de selectores.
Puntualizo lo "de forma general" debido a que de nuevo ha sido recogido en el documento de trabajo el selector de ancestro o padre que no aplica al elemento sino a su contenedor.
Puedes ampliar este aspecto con el artículo "Cómo se leen los selectores".
Conformando el nombre del selector CSS A la hora de dar nombre a los selectores CSS hay una serie de requisitos a tener en cuenta: Por conveniencia (acuerdo no formal) se utilizan minúsculas aunque CSS no es "case sensitive". Esto es, no diferencia entre mayúsculas y minúsculas. Por lo tanto para CSS es lo mismo el selector 'div' que 'DIV'. Sin embargo hay lenguajes a los que aplica CSS que sí lo son como el XML tanto en el nombre de los elementos como en el valor de sus atributos. Los nombres de los selectores pueden contener solo caracteres de la 'A' a la 'Z' y del '0' al '9' y contener guiones medios '-' o bajos '_' dentro de él. El nombre del selector no puede comenzar por un dígito (número), ni por un guion ni por alguno de los caracteres reservados. Es conveniente evitar el uso de símbolos "extraños". En caso de que necesites utilizar inexcusablemente alguno de los no permitidos utiliza "codificación CSS" y escápalos usando la barra invertida '\'. Así '.2clase' sería inválido pero '.\2clase' funcionaría. El selector '#foo>a' apuntará a un enlace hijo directo del elemento con id 'foo' pero '#foo\>a' al que tenga en el html el atributo de id igual a 'foo>a'. En CSS la barra invertida '\' se asocia con "tres tipos de caracteres de escape".
Estas restricciones de caracteres solo aplican en el ámbito de la hoja de estilos. Hago esta puntualización porque el documento Html y el CSS son dos campos totalmente distintos. Y el no tenerlo claro conduce a falsas polémicas e ideas como negar que "los selectores CSS de ids y class sí pueden comenzar por un número".
Alcance del selector CSS. La pseudoclase ':scoped'
En proceso de formulación y desarrollo. Se incluye a título informativo.
Algunas aplicaciones pueden acotar el ámbito de aplicación de los selectores CSS a un fragmento del documento o subárbol del DOM. Esta delimitación de alcance se puede hacer por dos métodos: 'scope-contained selectors' y 'scope-filtered selectors'.
Es el equivalente en las hojas de estilos a lo que supone emplear en el html el atributo 'scoped' dentro del elemento <style> usado dentro del body.
Puedes ampliar este aspecto en el artículo "Estilos acotados: «style scoped»".
Nota: Recientemente Chrome retiró su soporte a scoped tras habérselo dado durante algún tiempo.
Combinaciones lógicas y agrupación de selectores CSS
Los selectores se pueden agrupar para simplificar las hojas de estilo cuando varios elementos comparten una serie de declaraciones iguales. Así, en vez de crear varias reglas iguales en las que solo cambia el selector, se crea una única regla con todos los selectores necesarios para apuntar a los distintos elementos.
Las combinaciones y agrupaciones de selectores CSS recogidas en la especificación son:
Listas de selectores CSS la conforman dos o más selectores de cualquier tipo separados por una coma ',' a los que aplica el mismo bloque de declaraciones que comparten. Visto en detalle un poco más arriba en este artículo.
El selector CSS por pseudoclase :matches() La pseudoclase :matches() es del tipo funcional. Admite como argumento una lista de selección. Esto es, se indica dentro del paréntesis y separados por comas los casos en los que aplicará el bloque de declaraciones.
input:matches(:invalid, :out-of-range) {}
Aplicaría a los 'inputs' que cumplan con alguna de las condiciones indicadas: que su valor no sea válido o esté fuera del rango permitido en él.
El selector CSS por pseudoclase :not() La pseudoclase de negación :not(), al contrario que la anterior, apunta a los que no cumplen con los argumentos indicados.
a:not(:focus, :visited) {}
El selector CSS por pseudoclase :has()
La pseudoclase :has() es la formulación actual de un viejo conocido: el selector de precedente o padre.
Utilizada para apuntar a los elementos que contengan lo indicado en el argumento (valor dentro del paréntesis). Así el selector a:has(img) {} solo aplicará a los enlaces que contengan una imagen dentro de él.
El valor del argumento puede ser uno solo o una lista separadas por comas:
section:has(h1,h2,h3,h4,h5,h6) { /*bloque declaraciones*/
El bloque de declaraciones se aplicará a todo 'section' y solo a aquellos que contengan como mínimo un encabezado (hnº) dentro de él.
Al utilizar estos selectores CSS con estas pseudoclases hay que tener presente que: No se puede anidar la misma: colocar como argumento de la función (dentro del paréntesis) la misma pseudoclase anula el selector. Es erróneo hacer :not(:not()) o :matches(:matches() o :has(:has())