Unidad 9. Hojas de estilo CSS. Sintaxis. Selectores (IX)

9.6. Selector de atributos

Estos selectores permiten seleccionar etiquetas según sus atributos y el valor del atributo, se escribe entre corchetes el atributo y su valor. Hay varios operadores que podemos utilizar (=, ~=, |=, ^=, $=) por ejemplo:

[class] seleccionará todas las etiquetas que tengan un atributo class.

[class="aulaclic"] seleccionará todas las etiquetas que tengan un atributo class igual a "aulaclic".

[title^="aulaclic"] seleccionará todas las etiquetas que tengan un atributo title que empieze por "aulaclic".

[lang~="es-AR"] seleccionará todas las etiquetas que tengan un atributo lang que contenga el texto "es-AR".

[lang|="es"] seleccionará todas las etiquetas que tengan un atributo lang que contenga el texto "es" un guión y otro texto.

[href$="es"] seleccionará todas las etiquetas que tengan un atributo href que acabe con el texto "es".

Por ejemplo, las siguientes reglas:

[class] { color: red }
[class="aulaclic"] { color: blue }
[lang|="es"] { color: grey }
[lang~="es-AR"] { color: red }
[href$="es"] { color: green }
 [href^="https"] { color: greenyellow}

Al aplicarlas para este fragmento de página:

<h3 class="aulaclic">Selector de atributos con CSS</h3>
<h3 class="cursos_aulaclic">Subtitulo h3</h3>
<p>Línea uno</p>
<p class="aulaclic">Línea dos</p>
<p class="final">Línea tres</p>
<p lang="es-ES">Línea español España</p>
<p lang="es-AR">Línea español Argentina</p>
<p lang="es-MX">Línea español México</p>
<a class="enlace" href="https://www.aulaclic.es">aulaclic.es</a><br>
<a href="http://www.aulaclic.com">aulaclic.com</a><br>
<a href="https://wwww.aulaclic.org">aulaclic.org</a>

Produce el siguiente resultado:

Como vemos este tipo de selector nos permite muchas posibilidades a la hora de seleccionar partes muy específicas de una hoja de estilo.