Los selectores CSS permiten identificar a qué elemento (o elementos) se aplicarán los estilos definidos en dicho bloque. Los más conocidos son los de etiqueta (p, ul), de clase (.title) y de id (#top-bar), pero quiero presentarte un tipo de selectores que si los usas bien puedes ser un amo del CSS (o parecerlo) con poco esfuerzo: los selectores de atributo. Estos te permiten usar cualquier atributo HTML como selector CSS, y no solo eso, sino también comodines (una especie de micro expresiones regulares). Estos selectores van encerrados entre corchetes (o llaves cuadradas). Veamos algunos.
$&attr="value"$&
Esta es la forma más básica, indicamos el atributo y su valor. El uso más común son los tipos de input en un formulario.
[type="submit"] {
Display: block;
}
$&attr$&
También puedes indicar tan solo el atributo sin un valor. En ese caso se seleccionaran todos los elementos que tengan ese atributo (obviamente, sin importar el valor que tengan). Se me ocurre como ejemplo los campos requeridos de un formulario
[required] {
border-color: red;
}
$&attr^="value"$&
Busca que el valor del atributo inicie con el valor indicado. Por ejemplo, en el siguiente caso todos los enlaces que apunten a cualquier ruta dentro del dominio ed.team serán de color rojo.
[href^="https://ed.team"] {
color: red;
}
Ten en cuenta que si el atributo tiene multiples valores, toma todo lo que está entre comillas como una sola cadena. Por ejemplo, el siguiente selector se aplicará al elemento con la clase class="big button" pero no a este class="button big". No creas que el espacio antes de big implica un nuevo inicio (es un error muy común)
[class^="big"] {
font-size: 1.5em;
}
$&attr$="value"$&
Lo contrario al anterior, busca elementos cuyo atributo termine en el valor indicado. Un uso común es añadir un ícono según el tipo de archivo referenciado
[href$=".pdf"]::after {
content: url(icono-pdf.png);
}
$&attr*="value"$&
Busca que el atributo contenga el valor indicado en cualquier posición. Yo lo uso mucho para escribir menos HTML al usar BEM. Por ejemplo:
.button,
[class*="button--"] {
display : inline-block;
padding : .8em 1.6em;
background : blue;
color : #fff;
margin : 1em;
cursor : pointer;
text-decoration : none;
border-radius : .25em;
}
.button--alert {
background : red;
}
.button--cta {
background: green;
}
Así, cuando necesito variaciones del botón no necesito añadir dos clases class="button button--alert" sino que me basta con una class="button--alert".
$&attr~="value"$&
Para múltiples valores de un atributo separados por espacios puedes usar el comodin ~ para encontrar cualquiera de ellos. Ejemplo:
[class~="big"] {
color: red;
}
Seleccionará tanto a class="button big alert" como a class="big button alert" o a class=""button alert big. Incluso, cosa curiosa tan solo a class="big"
$&attr|="value"$&
Selecciona un atributo que comience con el valor indicado seguido de un guion. Prácticamente es lo mismo que \$&attr^="value-"\$&. Por ejemplo
[class|="col"] {
display: flex;
}
Lo anterior se aplicará a col-1-2, col-6-12, etc.
Trucos
Puedes combinar los selectores de atributos y conseguir resultados interesantes. Por ejemplo, lo siguiente dibujará un borde rojo a todas las imágenes que no tengan el atributo alt, así no olvidarás ponerlo.:
img:not([alt]) {
border: 2px solid red;
}
Puedes hacer que tus selectores de atributos sean case insensitive añadiendo una letra i al final.
[href*="ed.team" i] {
color: purple;
}
Lo anterior se aplicará a todos los enlaces que apunten al dominio (o algun subdominio) de ed.team, sin importar si fue escrito ED.team, ed.team, ed.Team, etc.
Si no estabas usando estos selectores en tus proyectos. ¿Qué estás esperando? Recuerda que si quieres saber más de CSS tenemos los siguientes cursos para ti: