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 atributoattr, sin importar el valor que tenga.[attr=val]: Este, seleccionará los elementos con el atributoattr, pero solo aquello cuyo valor coincida conval.[attr~=val]: Este selector afectará a los elementos con el atributoattr, pero solo si el valorvalestá contenido en la lista de valores (separados por espacios) incluidos en el valor deattr, 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á:
Nota: Los atributos data-* del ejemplo anteriorse denominar atributos de datos. Proporcionan una forma de almacenar datos personalizados en atributos HTML y pueden ser fácilmente extraidos y utilizados. Para más información consultar Cómo usar atributos de datos.
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 atributoattrcuyo valor sea exactamentevalo empieza porval-(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 atributoattrcomienza por el valorval.[attr$=val]: Este selector elegirá todos los elementos cuyo atributoattrtermina por el valorval.[attr*=val]: Este seleccionará todos los elementos cuyo atributoattrcontiene la cadenaval(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 textoinc,sameydecque aparecen como valores del atributodata-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
proyrelque aparecen como valores del atributodata-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.
Playable code 4
<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.