Expresiones regulares en CSS
Las expresiones regulares, también llamadas regex, son una herramienta poderosa para buscar y manipular textos. Aunque las expresiones regulares no son nativas de CSS, se pueden utilizar en combinación con selectores de atributos para aplicar estilos de manera precisa.
En este artículo, exploraremos cómo las regex pueden ser aprovechadas en CSS para mejorar la flexibilidad y eficiencia de tus hojas de estilo.
Selectores de Atributos en CSS
Los selectores de atributos en CSS permiten seleccionar elementos basándose en el valor de uno de sus atributos. Estos selectores son muy útiles para aplicar estilos a elementos específicos sin necesidad de añadir clases adicionales o modificar el HTML. Los selectores de atributos se escriben entre corchetes ([]) y pueden ser utilizados de varias maneras para lograr diferentes niveles de coincidencia.
Tipos de Selectores de Atributos
1. Selector exacto ([attr="value"]):
Selecciona elementos cuyo atributo attr es exactamente igual a value.
a[href="https://example.com"] {
color: red;
}
<a href="https://example.com">Example</a>
<a href="https://another.com">Another</a>
2. Contiene una palabra exacta ([attr~="value"]):
Selecciona elementos cuyo atributo attr contiene una palabra exacta value.
[title~="flower"] {
border: 1px solid red;
}
<div title="red flower">Red Flower</div>
<div title="blue sky">Blue Sky</div>
3. Empieza con ([attr^="value"]):
Selecciona elementos cuyo atributo attr empieza con value.
a[href^="https"] {
color: green;
}
<a href="https://example.com">Secure Link</a>
<a href="http://example.com">Insecure Link</a>
4. Termina con ([attr$="value"]):
Selecciona elementos cuyo atributo attr termina con value.
a[href$=".pdf"] {
color: red;
}
<a href="document.pdf">PDF Document</a>
<a href="image.png">Image</a>
5. Contiene ([attr*="value"]):
Selecciona elementos cuyo atributo attr contiene value en cualquier parte.
a[href*="example"] {
color: red;
}
<a href="https://example.com">Example</a>
<a href="https://test.com">Test</a>
Estos selectores permiten una gran flexibilidad y pueden ser combinados con otros selectores para crear reglas de estilo más específicas y poderosas.