Selectores de atributos en CSS

1. Tipos de selectores de atributos

Los selectores de atributos en CSS permiten seleccionar elementos HTML basándose en los valores de sus atributos, como id, class, name, type, y otros. Ofrecen flexibilidad y precisión al seleccionar elementos, lo cual es especialmente útil para estilizar elementos de formularios, enlaces y otros con atributos únicos. En este artículo, veremos los diferentes tipos de selectores de atributos y su uso.

Los selectores de atributos se dividen en varias categorías, que permiten seleccionar elementos basándose en la presencia del atributo, su valor exacto o una parte del mismo. Principales tipos de selectores de atributos:

1. Selector de atributo: selecciona elementos que contienen un atributo específico, independientemente de su valor.
2. Selector de atributo con valor: selecciona elementos con un atributo que tiene un valor específico.
3. Selector de atributo con valor inicial: selecciona elementos cuyo valor de atributo comienza con un prefijo especificado.
4. Selector de atributo con valor final: selecciona elementos cuyo valor de atributo termina con un sufijo específico.
5. Selector de atributo que contiene un valor: selecciona elementos cuyo valor de atributo contiene una subcadena específica.
6. Selector de atributo con separación por espacios: selecciona elementos cuyo valor de atributo contiene una palabra específica, separada por espacios.
7. Selector de atributo con separación por guion: selecciona elementos cuyo valor de atributo contiene una palabra específica, separada por guiones.

2. Selector de atributo (Attribute Selector)

El selector de atributo selecciona elementos que tienen un atributo específico, independientemente de su valor. Este selector es útil cuando necesitamos seleccionar todos los elementos con un atributo concreto.

input[type] {
  border: 1px solid black;
}

<input type="text">
<input type="password">
<input type="email">
<input>

En este ejemplo, todos los elementos <input> con el atributo type tendrán un borde negro, independientemente del valor de este atributo.

3. Selector de atributo con valor

El selector de atributo con valor selecciona elementos cuyo atributo es igual a un valor específico. Es útil cuando se necesita seleccionar elementos con un valor de atributo específico, por ejemplo, todos los campos de texto o los enlaces que se abren en una nueva pestaña.

    
input[type="text"] {
  background-color: #f0f0f0;
}
    
  

    
<input type="text">
<input type="password">
<input type="email">
    
  

Aquí, solo el campo de texto <input type="text"> tendrá un fondo gris claro.

4. Selector de atributo con valor inicial

El selector de atributo con valor inicial selecciona elementos cuyo valor de atributo comienza con un prefijo específico. El prefijo se indica después del símbolo ^=. Este selector resulta útil, por ejemplo, para seleccionar todos los enlaces que conducen a un sitio específico.

    
a[href^="https://example.com"] {
  color: green;
}
    
  

    
<a href="https://example.com/page1">Enlace al sitio example.com</a>
<a href="https://another.com">Otro enlace</a>
    
  

Solo el primer enlace estará en color verde, ya que comienza con "https://example.com".

5. Selector de atributo con valor final

El selector de atributo con valor final selecciona elementos cuyo valor de atributo termina con un sufijo específico. El sufijo se indica después del símbolo $=. Este selector resulta útil para seleccionar archivos de un tipo específico, como imágenes en formato .png.

    
img[src$=".png"] {
  border: 2px solid blue;
}
    
  

    
<img src="image1.png" alt="Imagen 1">
<img src="image2.jpg" alt="Imagen 2">
    
  

Aquí, solo la imagen con la extensión .png tendrá un borde azul.

6. Selector de atributo que contiene un valor

El selector de atributo que contiene un valor selecciona elementos cuyo valor de atributo contiene una subcadena específica. Esta subcadena se indica después del símbolo *=. Este selector es útil cuando se necesita seleccionar elementos con un atributo que contiene una parte específica del valor, por ejemplo, enlaces a una sección específica de un sitio.

    
a[href*="section"] {
  font-weight: bold;
}
    
  

    
<a href="https://example.com/section1">Enlace a la sección 1</a>
<a href="https://example.com/about">Sobre nosotros</a>
<a href="https://example.com/section2">Enlace a la sección 2</a>
    
  

Solo los enlaces que contienen "section" en su href estarán en negrita.

7. Selector de atributo con separación por espacios

El selector de atributo con separación por espacios selecciona elementos cuyo valor de atributo contiene una palabra específica, separada por espacios. Este selector utiliza el símbolo ~=. Se usa frecuentemente para seleccionar elementos con ciertas clases u otros atributos que contienen varios valores separados por espacios.

    
[class~="featured"] {
  background-color: yellow;
}
    
  

    
<div class="featured item">Elemento con la clase "featured"</div>
<div class="item">Elemento normal</div>
<div class="highlight featured">Otro elemento con la clase "featured"</div>
    
  

Aquí, solo los elementos que contienen featured en la lista de clases tendrán un fondo amarillo.

8. Selector de atributo con separación por guion

El selector de atributo con separación por guion selecciona elementos cuyo valor de atributo comienza con un valor específico y puede estar complementado con un guion. El símbolo |= se usa para seleccionar elementos cuyo valor coincide con el especificado o comienza con él y está separado por un guion.

    
[lang|="en"] {
  color: blue;
}
    
  

    
<p lang="en">Texto en inglés</p>
<p lang="en-us">Texto en inglés (variante americana)</p>
<p lang="fr">Texto en francés</p>
    
  

Aquí, solo los elementos con el atributo lang igual a "en" o que comienzan con "en-", como "en-us", estarán en color azul.

9. Ejemplo de uso de diferentes selectores de atributos

A continuación se muestra un ejemplo de HTML y CSS que demuestra la aplicación de diferentes selectores de atributos.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de selectores de atributos CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="Campo de texto">
<input type="password" placeholder="Contraseña">
<input type="email" placeholder="Email">

<a href="https://example.com/page1">Enlace a example.com</a>
<a href="https://example.com/section2">Enlace a la sección</a>

<img src="image.png" alt="Imagen PNG">
<img src="photo.jpg" alt="Imagen JPG">

<div class="featured item">Elemento con la clase "featured"</div>
<div class="item">Elemento normal</div>
<div class="highlight featured">Otro elemento con la clase "featured"</div>

<p lang="en">Texto en inglés</p>
<p lang="en-us">Texto en inglés americano</p>
<p lang="fr">Texto en francés</p>
</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de selectores de atributos CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="Campo de texto">
<input type="password" placeholder="Contraseña">
<input type="email" placeholder="Email">

<a href="https://example.com/page1">Enlace a example.com</a>
<a href="https://example.com/section2">Enlace a la sección</a>

<img src="image.png" alt="Imagen PNG">
<img src="photo.jpg" alt="Imagen JPG">

<div class="featured item">Elemento con la clase "featured"</div>
<div class="item">Elemento normal</div>
<div class="highlight featured">Otro elemento con la clase "featured"</div>

<p lang="en">Texto en inglés</p>
<p lang="en-us">Texto en inglés americano</p>
<p lang="fr">Texto en francés</p>
</body>
</html>

/* Selector de atributo */
input[type] {
  border: 1px solid black;
}

/* Selector de atributo con valor */
input[type="text"] {
  background-color: #f0f0f0;
}

/* Selector de atributo con valor inicial */
a[href^="https://example.com"] {
  color: green;
}

/* Selector de atributo con valor final */
img[src$=".png"] {
  border: 2px solid blue;
}

/* Selector de atributo que contiene un valor */
a[href*="section"] {
  font-weight: bold;
}

/* Selector de atributo con separación por espacios */
[class~="featured"] {
  background-color: yellow;
}

/* Selector de atributo con separación por guion */
[lang|="en"] {
  color: blue;
}