Atributos como selectores CSS

Elementos con atributos

Podemos seleccionar un elemento que tiene un cierto atributo utilizando yn selector donde el atributo aparece entre corchetes [ atributo ]{. . .}

input[ required ]{...}

Tome por ejemplo este HTML que aparece al final del articulo acerca de selectores CSS para elementos:

<form>
<input type="text" id="input0" required="">
<label for="input0">una etiqueta</label>

<textarea rows="4" cols="50" id="ta0"></textarea>
<label for="ta0">una etiqueta para textarea</label>
</form>

Podemos seleccionar al elemento <label> situado inmediatamente despues del input utilizando este selector:

input[required] + label {text-decoration: underline;}

Esto selecciona al elemento label que viene inmediatamente después de un campo obligatorio ( elemento input que tiene un atributo required )

El atributo tiene un cierto valor

También es posible seleccionar solo a los elementos que tengan un cierto atributo con un valor predeterminado. Por ejemplo si quiero dar un estilo especial a los enlaces hacia https://css-tricks.com podría utilizar este selector:

a[ href = "https://css-tricks.com" ]{...}

El atributo empieza por...

Pero esta es una coincidencia exacta. Es posible que no tenga muchos enlaces de este tipo. Lo que sí que sería interesante, sería poder dar un estilo especial a todos los enlaces externos o sea los enlaces que empiezan por "https".
Para lograrlo voy a utilizar este selector:

a[ href ^= "https" ]{...}

Esto seleccionaría a todos los enlaces externos que empiezan por "https" pero no por "http"

El atributo acaba en...

Imaginase esta situación: en una lista de enlaces quiero destacar a los archivos en formato pdf. Para esto necesito utilizar un selector que selecciona a todos los enlaces que acaban en .pdf:

a[ href $= ".pdf"]{...}

El atributo contiene...

En el caso en el cual quiero seleccionar solo a los enlaces hacia mozilla.org por ejemplo tanto getBBox como New CSS Features in Firefox 68  necesito seleccionar solo aquellos enlaces que contienen mozilla.org
Para esto voy a utilizar este selector:

a[href *= "mozilla.org"]{...}

Uno de los valores del atributo es...

En el CSS ( existía ya en el CSS2 ) hay otro selector que selecciona los elementos con un atributo que contiene algo y que puede ser, de alguna manera, confuso y desconcertante: [ attribute ~= value ]

En el ejemplo anterior si utilizamos este selector no funciona porque selecciona todos los elementos con un  cierto atributo cuyo valor contiene una cierta cadena de texto de una lista de palabras separadas por espacios. Sabemos que los atributos data- pueden contener una lista de valores por ejemplo data-lista ="a b c" o data-lista ="b c d". (Pasa lo mismo con los atributos title, alt, lang etc…). Si queremos seleccionar a todos los elemento cuyo atributo data-list contiene `b` podemos utilizar este selector

[data-lista ~= "b"]{color:red}

En este caso también podemos utilizar el asterisco: [data-list*="b"]{color:red}

El valor del atributo empieza por...

En el CSS2 ya existía otro selector utilizado para seleccionar todos los elementos con un atributo que empieza con una cierta cadena de texto de una lista de valores separados por guiones. Por ejemplo [ lang |= en ] selecciona los elementos con un atributo  lang = "en", lang = "en-US" y lang = "en-cockney"

[ lang |= en ]{...}