soy Kseso y esto EsCSS

Selector Css por valor de Atributo: simplifica la hoja de estilos y el Html

Explicación a fondo del selector Css por valor de atributo: todas sus posibles variaciones y las novedades del último documento. Con aplicación práctica a la mejora de la hoja de estilos y el Html de Bootstrap

Selector Css por valor de Atributo: simplifica la hoja de estilos y el Html

·Por Kseso ✎ 14
Selector Css por valor de Atributo: simplifica la hoja de estilos y el Html

El selector Css. Guía a fondo para iniciados y novatos en Css es un artículo de este blog de consulta obligada para comprender los selectores Css... si necesitas información sobre ellos, claro.

Hay un viejo recurso para poder declarar conjuntamente, en una sola regla Css, las declaraciones comunes y compartidas por varios elementos del Html marcados con un valor distinto en su atributo class.

Es el uso de un selector múltiple. Esto es, hacer una relación con todos y cada uno de dichos valores (selectores de clase) separados por comas ,

Recurso que sigue funcionando de forma satisfactoria. Es funcional al 100% y es totalmente válido (según las especificaciones).

Sin embargo, pese a todo lo anterior, no deja de tener sus pequeños inconvenientes. Inconvenientes que hace ya un tiempo que pueden obviarse utilizando el selector por atributo y/o su valor en lugar de esa larga relación de valores dispares.

Las más significativas serían sin extendernos demasiado:

  • Hace interminable la hoja de estilos.
  • Propenso a cometer algún error de omisión o de teclado.
  • En caso de tener que añadir algún otro elemento a esa relación debes modificar la hoja obligatoriamente para ingluirlo.

Por si la descripción anterior no resulta clara, me estoy refiriendo a lo que ves en la imagen de abajo. Dos reglas Css. La primera afecta a 12 elementos distintos del html y la segunda a 48.

Regla Css con selector múltiple
Reglas Css con selectores múltiples de clase

Bonita relación. Y no. No es algo que me haya inventado para ilustrar el artículo. Proviene del framework[1] Bootstrap, referente a la construcción de su grilla.

La solucción: selector por atributo

No pierdas de vista la imagen anterior con su ristra de selectores y compárala con la siguiente:

Reglas Css con selector único por atributo
Reglas Css con selector único por atributo

No hay color. Donde antes necesitábamos de 60 selectores en dos reglas (12 y 48) para otros tantos elementos, ahora lo hemos reducido a uno sólo en cada regla. Si no ves las ventajas, allá tú. No pienso explayarme en ellas ;-) xD

Bueno, sólo recordaré el axioma por antonomasia: Hazlo simple

Html más simple con el Selector Css por atributo

El uso de selectores por atributo, además de los beneficios en las hojas de estilos, tienen una ventaja añadida. Facilitan un marcado más simple en el Html.

Como ya tenía cargada la página de Bootstrap y el inspector de código lanzado, vuelvo a utilizarla como ejemplo:

múltiples nombres de clases <div class='col-md-3 col-md-offset-6'> </div> <div class='col-md-3 col-md-offset-3'> </div>

Como ves, sus creadores añaden un segundo nombre de clase (valor) col-md-offset-6 y col-md-offset-3 a cada div con vistas a aplicarles estilos propios y diferenciadores de cada col-md-offset-Nº.

Esta necesidad de añadir valores de clases se puede obviar teniendo en mente los selectores Css por atributo. Como vemos, en la generación de los nombres de clases los autores de Bootstrap siguen una metodología lógica. Así que podrían reducirles la clase a lo siguiente:

<div class='col-md-3-offset-6'> </div> <div class='col-md-3-offset-3'> </div>

Con este código Html podremos y deberíamos utilizar el selector de atributo con el combinador $='' que significa que termina exáctamente con la cadena de texto indicada entre las comillas:

[class$='-offset-1'] {...} [class$='-offset-2'] {...} [class$='-offset-3'] {...} [class$='-offset-4'] {...} [class$='-offset-5'] {...} [class$='-offset-6'] {...}

Selector Css por Atributo y combinadores

La especificación Selectors Level 3 [W3C Recomendation 29/09/1011] divide a los selectores Css por atributo en tres grupos. División que se mantiene en el siguiente desarrollo Selectors Level 4 [W3C Editor´s Draft 12/08/2014]

La sintaxis general y común es la siguiente: [attr='valor'], cuyos términos significan:

[ ]
El corchete de apertura y cierre identifica a este tipo de selector. Son obligados.
attr
El nombre del atributo por el que queremos seleccionar los elementos. tales como class, type, id... incluidos los atributos de autor data-algo
'valor'
La cadena o subcadena de texto que ha de tener el valor del atributo (en el html) indicado para que se le aplique la regla Css.

El uso o no de comillas dobles (" ") o simples (' ') en el valor del selector es opcional. Pero aconsejable su uso tras la aparición del identificador i que los hace case-insensitive.

Selector por atributo presente y por valor

En esta primera división de los selectores de atributo la especificación engloba los siguientes:

[attr]
Selecciona a todos los elementos que tengan declarado el atributo indicado, independientemente de que tenga o no algún valor y cuál(es) sean.
Así el selector [href] sería equivalente al selector de elemento a. Apunta a todos los enlaces (porque es obligado que tengan dicho atributo).
[attr='valor']
Selecciona cualquier elemento que tenga el atributo attr y cuyo valor sea exáctamente valor.
[att~='valor']
Representa a los elementos que. teniendo el atributo attr, su valor está formado por dos o más cadenas de texto (valores) separados por espacio en blanco y una de esas cadenas (valores) es exactamente valor.
Si el valor indicado en el selector contiene algún espacio en blanco uno dos o es una cadena vacía el selector es nulo. La regla no aplicará a ningún elemento.
[att|='valor']
Representa a los elementos cuyo atributo attr comienza exactamente por la cadena valor o por esa cadena de texto seguida de un guión medio valor-

Selector Css por subcadena textual del atributo

Junto a los anteriores, hay otro grupo de selectores Css por valor de atributo, que a diferencia de ellos, son utilizados para identificar elementos no por un valor del atributo sino por una parte o subcadena textual.

[att^='valor']
Representa a los elementos en los que uno de los valores del atributo valor comienza por el valor valor. La diferencia con el selector [att|='valor'] es que éste debe comenzar su atributo por dicho valor (estar a continuación del signo '=').
[att$='valor']
Selecciona al elemento cuyo atributo attr termina exactamente con la cadena valor. No que uno de los posibles valores (texto separado por espacio en blanco) sino el final del valor del atributo. Por ejemplo, si el valor del atributo fuese mayorvalor super no aplicaría. Debería ser super mayorvalor.
[att*='valor']
Apunta a todos los elementos cuyo atributo attr contenga la cadena valor con independencia de en qué parte del valor del atributo se encuentre.

Selector Css de atributo por espacio de nombres (namespace)

Si en tus documentos haces uso de espacios de nombres o namespace [ver wikipedia] y [css namespaces] Css también permite discriminar elementos según el "espacio de nombre" en el que se encuentre el elemento.

Selector de atributo Css por varios valores

Como el uso de espacios en blanco anula al selector y de momento (ver más abajo) no estaba contemplado el uso de comas para separar varios valor en el selector, quizás te preguntes cómo formar un selector de atributo que tenga esto presente.

Pues igual que se hace con el uso del selector de clase para aquellos elementos que tienen declaradas dos en el atributo class. Un [...] tras otro [...] y tantos como necesites:

span[hello="Marte"][goodbye="Luna"] {...}

Cadeneta de selectores que también es posible con las pseudoclases. Especialmente interesante el uso de las pseudoclases lógicas:

.universo[hello="Marte"]:not([goodbye="Luna"]) {...}

Cambios en el selector Css por Atributo

Respecto a documentos anteriores, dos son las novedades que acompañan al último desarrollo:

  1. Se plantea (consulta) la posibilidad de una sintaxis de múltiples valores separados por comas en el valor del selector: [rel ~= next, prev, up, first, last]
  2. Pese a que los lenguajes Css y Html no son case-sensitive (no diferencian entre mayúsculas y minísculas: es lo mismo 'AA' = 'Aa' = 'aA' = 'aa') hay otros que sí lo son. Así que pese a que los selectores en el ámbito de Css no distingan entre el uso de mayúsculas y minúsculas, si dicho Css se aplica a algún lenguaje case-sensitive el selector attr='valor'] no afectaría al elemento con atributo ATTR o cuyo valor fuese attr='VALOR'
    Para evitar estas situaciones, añade el uso del modificador i para solventarlo. Este modificar ha de colocarse justo antes del corchete de cierre:
[frame="hsides" i] {}

Ver el artículo "Selector atributo [case-insensitive i]"

Soporte por navegadores al Selector Css por Atributo

UNIVERSAL. No debería preocuparte a estas alturas que los IE8 y anteriores tengan alguna insuficiencia también con los selectores por atributo: [ver canIuse.com]

avatar del Editor del blog

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