Selector de atributo por guión en el valor

El selector de atributo por guión en el valor aplica estilo a un elemento, cuyos valores de atributo están separados por un guión.

Ejemplo

Encontremos todos los elementos que tienen text en valores separados por guión y cambiemos su color a rojo:

<p class="text-main-header">text1</p>
<p class="text-content">text2</p>
<p class="test-main">text3</p>
<p class="tag-test">text4</p>

p[class|="text"] {
	color: red;
}

selector de atributo,
que busca un elemento por el nombre del atributo
selector de atributo,
que busca un elemento por el valor del atributo
selector de atributo,
que busca un elemento por el inicio del valor del atributo
selector de atributo,
que busca un elemento por el final del valor del atributo
selector de atributo,
que busca un elemento por el texto en el valor del atributo
selector de atributo,
que busca un elemento por uno de los valores del atributo
Selector hijo,
que permite seleccionar elementos por anidamiento directo
Selector contextual,
que permite seleccionar un elemento por su elemento padre
Selector adyacente,
que permite seleccionar un elemento por su vecino adyacente
Selector de hermanos general,
que permite seleccionar elementos después de uno dado
Selector universal,
que permite seleccionar todos los elementos