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>