Selectores de atributo
Los selectores de atributo hacen referencia a elementos en función del nombre del atributo o el valor.
[title] {
color: aquamarine;
}
h1[title="hello"] {
color: blueviolet;
}
h1[title~="hello"] {
color: cadetblue;
}
button[class|="btn"] {
background: coral;
}
a[href^="#"] {
color: crimson;
}
img[src$=".png"] {
border: 3px solid hotpink;
}
h1[class*="title"] {
color: dodgerblue;
}
Con CSS se pueden seleccionar elementos de diferentes formas. El método más básico es haciendo referencia a un elemento por su nombre (h1 { ... }). También están las clases (.title { ... }) o ids (#element { ... }).
Sin embargo, no son los únicos, existe la posibilidad de hacer referencia a elementos usando cualquiera de sus atributos, incluso basándonos en los valores.
Cuentan con una sintaxis especial ([]) y pueden permanecer solos, acompañados de elementos, clases o ids e incluso en combinación con otros.
/* Cualquier elemento que tenga el atributo "title" con el valor "hello" */
[title="hello"] {
color: red;
}
/* Cualquier elemento <p> que tenga el atributo "title" con el valor "hello" */
p[title="hello"] {
color: red;
}
/* Cualquier elemento con la clase "text" y el atributo "title" con el valor "hello" */
.text[title="hello"] {
color: red;
}
/* Cualquier elemento con el id "text" y el atributo "title" con el valor "hello" */
#text[title="hello"] {
color: red;
}
/* Cualquier elemento <a> que tenga el atributo "title" con el valor "hello"
y el atributo "rel" con el valor "external" */
a[title="hello" rel="external"] {
color: red;
}
[atributo]
Selecciona los elementos que tengan el atributo especificado.
[title] {
margin: 10px;
}
Explicación: Todos los elementos que tengan el atributo title van a tener un margen de 10px, sin importar su valor.
[atributo="valor"]
Selecciona los elementos con el atributo y valor especificados. Estos deben de ser idénticos a como fueron escritos.
h1[title="hello"] {
margin: 10px;
}
Explicación: Todos los elementos <h1> que tengan el atributo title con el valor hello, van a tener un margen de 10px.
No coinciden con el atributo:
<h1 title="hello-">Hello</h1>
<h1 title="-hello">Hello</h1>
<h1 title="hello!">Hello</h1>
<h1 title="hello ">Hello</h1>
<h1 title=" hello">Hello</h1>
<h1 title="hello people">Hello</h1>
<h1 title="hello hello">Hello</h1>
[atributo~="valor"]
Selecciona los elementos con el atributo especificado y cuyo valor sea una palabra entre una lista de valores.
h1[title~="hello"] {
margin: 10px;
}
Explicación: Todos los elementos <h1> que tengan el atributo title con el valor hello, van a tener un margen de 10px. Siempre y cuando sea un único valor o se rodee de espacios, incluso espacios con más palabras.
Coinciden con el atributo:
<h1 title="hello">Hello</h1>
<h1 title="hello ">Hello</h1>
<h1 title=" hello">Hello</h1>
<h1 title="hello people">Hello</h1>
<h1 title="hello hello">Hello</h1>
<h1 title="hello people hello">Hello</h1>No coinciden con el atributo:
<h1 title="hello-">Hello</h1>
<h1 title="-hello">Hello</h1>
<h1 title="hello!">Hello</h1>[atributo|="valor"]
Selecciona los elementos con el atributo especificado y cuyo valor empiece con la palabra definida o sea escrito antes del -. El valor debe ser una palabra completa.
button[class|="btn"] {
margin: 10px;
}
Explicación: Todos los elementos <button> que tengan el atributo class con el valor btn al principio o antes de un guion -, van a tener un margen de 10px.
Coinciden con el atributo:
<button class="btn">Button</button>
<button class="btn-">Button</button>
<button class="btn-small">Button</button>
<button class="btn-small blue">Button</button>No coinciden con el atributo:
<button class="btn ">Button</button>
<button class=" btn">Button</button>
<button class="btn small">Button</button>
<button class="small btn">Button</button>
<button class="btnSmall">Button</button>
[atributo^="valor"]
Selecciona los elementos con el atributo especificado y cuyo valor comience con el texto definido. El valor no debe ser una palabra completa.
a[href^="#"] {
margin: 10px;
}
Explicación: Todos los elementos <a> que tengan el atributo href con el valor al principio #, van a tener un margen de 10px.
Coinciden con el atributo:
<a href="#title">filisantillan</a>
<a href="#title ">filisantillan</a>
<a href="#titleFili">filisantillan</a>
<a href="#title-fili">filisantillan</a>No coinciden con el atributo:
<a href="#text">filisantillan</a>
<a href=" #title">filisantillan</a>
<a href="https://title.com">filisantillan</a>
<a href="title.com">filisantillan</a>[atributo$="valor"]
Selecciona los elementos con el atributo especificado y cuyo valor termina con el texto definido. El valor no debe ser una palabra completa.
img[src$=".png"] {
margin: 10px;
}
Explicación: Todos los elementos <img> que tengan el atributo src con el valor al final .png, van a tener un margen de 10px.
Coinciden con el atributo:
<img src="./image.png">
<img src="./image?123.png">
<img src="./images/image.png">
<img src="./my-image.png">No coinciden con el atributo:
<img src="./image.jpg">
<img src="./image.webp">
<img src="./my-image.png ">[atributo*="valor"]
Selecciona los elementos con el atributo especificado y cuyo valor contiene el texto definido. El valor no debe ser una palabra completa.
h1[class*="title"] {
color: dodgerblue;
}
Explicación: Todos los elementos <h1> que tengan el atributo class con el valor title en cualquier posición o lugar, van a tener un margen de 10px.
Coinciden con el atributo:
<h1 class="title">Welcome!</h1>
<h1 class="title-">Welcome!</h1>
<h1 class="-title">Welcome!</h1>
<h1 class="mytitle">Welcome!</h1>
<h1 class="title ">Welcome!</h1>
<h1 class=" title">Welcome!</h1>
<h1 class="title red">Welcome!</h1>
<h1 class="red title">Welcome!</h1>No coinciden con el atributo:
<h1 class="Title">Welcome!</h1>
<h1 class="myTitle">Welcome!</h1>
<h1 class="mytiTle">Welcome!</h1>