Selectores de Atributos

Los selectores de atributos realiza la selección de los elementos afectados por la declaración en función de los attributes y sus valores. Su sintaxis consiste en la inclusión del nombre del atributo entre corchetes seguido opcionalmente de la condición respecto del valor del atributo. Los selectores de atributos se dividen en dos tipos dependiendo de la forma en que seleccionan los valores del atributo: Selectores de atributo de presencia y valor y selectores de atributo de valor textual.

Selectores de presencia y valor

Estos selectores de atributos afectarán a los elementos cuyo valor coincida exactamente con el valor del atributo especificado:

• [attr] : Este selector 'seleccionará' todos los elementos que contengan el atributo attr, sin importar el valor que tenga.
• [attr=val] : Este, seleccionará los elementos con el atributo attr, pero solo aquello cuyo valor coincida con val.
• [attr~=val]: Este selector afectará a los elementos con el atributo attr, pero solo si el valor val está contenido en la lista de valores (separados por espacios) incluidos en el valor de attr, por ejemplo una de las clases contenida en una lista de clases (separadas por espacios).

Veamos como ejemplo el siguiente fragmento de código HTML:

Ingredients for my recipe: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

Y un sencillo documento de estilos CSS:

/* All elements with the attribute "data-vegetable"
   are given green text */
[data-vegetable] {
  color: green;
}

/* All elements with the attribute "data-vegetable"
   with the exact value "liquid" are given a golden
   background color */
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/* All elements with the attribute "data-vegetable",
   containing the value "spicy", even among others,
   are given a red text color */
[data-vegetable~="spicy"] {
  color: red;
}

El resultado será:

Selector de atributos por valor textual

También conocidos como "RegExp-like selectors", pues proporcionan una forma de selección similar a las expresiones normales regular expression (aunque siendo estrictos, estos selectores no son verdaderas expresiones normales):

• [attr|=val] : Este selector elegirá todos los elementos con el atributo attr cuyo valor sea exactamente val o empieza por val- (nota: el guion no es un error, se usa para manejar códigos de lenguaje de programación).

• [attr^=val] : Seleccionará todos los elementos cuyo atributo attr comienza por el valor val.
• [attr$=val] : Este selector elegirá todos los elementos cuyo atributo attr termina por el valor val.
• [attr*=val] : Este seleccionará todos los elementos cuyo atributo attr contiene la cadena val (al contrario que [attr~=val], este selector no considera los espacios como separador de valores sino como parte del valor del atributo).

Continuemos con el ejemplo previo y añadámosle las siguientes reglas CSS:

Ingredients for my recipe: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

/* Classic usage for language selection */
[lang|=fr] {
  font-weight: bold;
}

/* All elements with the attribute "data-quantity", for which
   the value starts with "optional" */
[data-quantity^="optional"] {
  opacity: 0.5;
}

/* All elements with the attribute "data-quantity", for which
   the value ends with "kg" */
[data-quantity$="kg"] {
  font-weight: bold;
}

/* All elements with the attribute "data-vegetable" containing
   the value "not spicy" are turned back to green */
[data-vegetable*="not spicy"] {
  color: green;
}

Con las nuevas reglas el resultado será:

Apredizaje activo: Diseño de los resultados de futbol

En este ejercicio, entrenaremos el uso de selectores de atributos a varias reglas para dar estilo a una lista de resultados de futbol. Trataremos de aplicar los siguientes efectos:

• Las primeras 3 reglas, contienen los iconos de las banderas de UK, Alemania y España respectivamente a la parte izquierda de los elementos de la lista. Deberás usar los selectores de atributos correctos para que los equipos aparezcan con la bandera del país adecuada, seleccionada por el texto.

• Las reglas de la 4 a la 6 contienen los colores de fondo que indican si el equipo asciende en la clasificación: (green, rgba(0,255,0,0.7)), desciende: (red, rgba(255,0,0,0.5)), o permanece igual: (blue, rgba(0,0,255,0.5).)  Utiliza el selector de atributos para aplicar los colores correctos a los equipos adecuados que coincidan con las cadenas de texto inc, same y dec que aparecen como valores del atributo data-perf.

• Las reglas 7–8 se refieren a los equipos que promocionan (negrita) bold, y los equipos en zona de descenso (cursiva y gris) italic and gray. Utiliza el selector de atributos adecuado para aplicar estos estilos a los equipos correspondientes, identificados por el texto pro y rel que aparecen como valores del atributo data-perf.

Si te equivocas puedes comenzar de nuevo pulsando el botón Reset. Si te atrancas, pulsa el botón Show solution para ver una respuesta válida.

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ol>
  <li lang="en-GB" data-perf="inc-pro">Manchester United</li>
  <li lang="es" data-perf="same-pro">Barcelona</li>
  <li lang="de" data-perf="dec">Bayern Munich</li>
  <li lang="es" data-perf="same">Real Madrid</li>
  <li lang="de" data-perf="inc-rel">Borussia Dortmund</li>
  <li lang="en-GB" data-perf="dec-rel">Southampton FC</li>
</ol></textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">li[] {
   background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/en-GB.png") 5px center no-repeat;
 }

li[] {
   background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/de.png") 5px center no-repeat;
 }

li[] {
   background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/es.png") 5px center no-repeat;
 }

li[] {
   background-color: rgba(0,255,0,0.7);
 }

li[] {
   background-color: rgba(0,0,255,0.5);
 }

li[] {
   background-color: rgba(255,0,0,0.7);
 }

li[] {
   font-weight: bold;
 }

li[] {
   font-style: italic;
   color: #666;
 }

ol {
   padding: 0;
 }

li {
   padding: 3px 3px 3px 34px;
   margin-bottom: 5px;
   list-style-position: inside;
 }</textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;overflow:auto;"></div>
  <div class="controls">
    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
    <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

solution.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = 'li[lang="en-GB"] {\n   background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/en-GB.png") 5px center no-repeat;\n}\n\nli[lang="de"] {\n   background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/de.png") 5px center no-repeat;\n}\n\nli[lang="es"] {\n   background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/es.png") 5px center no-repeat;\n}\n\nli[data-perf*="inc"] {\n   background-color: rgba(0,255,0,0.7);\n}\n\nli[data-perf*="same"] {\n   background-color: rgba(0,0,255,0.5);\n}\n\nli[data-perf*="dec"] {\n   background-color: rgba(255,0,0,0.7);\n}\n\nli[data-perf*="pro"] {\n   font-weight: bold;\n}\n\nli[data-perf*="rel"] {\n   font-style: italic;\n   color: #666;\n}\n\nol {\n   padding: 0;\n}\n\nli {\n   padding: 3px 3px 3px 34px;\n   margin-bottom: 5px;\n   list-style-position: inside;\n}';
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

Próximamente

Vamos a meter una marcha más, viendo Pseudo-clases and pseudo-elementos.