Selectores de atributos

6.1 Tipos de selectores de atributos

Los selectores de atributos en CSS te permiten escoger elementos basados en la presencia de atributos, sus valores o partes de los valores de los atributos. Ofrecen habilidades flexibles y poderosas para estilizar elementos HTML, lo que los hace especialmente útiles para trabajar con contenido dinámico y páginas web interactivas.

Tipos de selectores de atributos

• Selector de atributo (Attribute Selector)
• Selector de atributo con valor (Attribute Selector with Value)
• Selector de atributo con valor inicial (Attribute Selector with Prefix)
• Selector de atributo con valor final (Attribute Selector with Suffix)
• Selector de atributo que contiene un valor (Attribute Selector with Substring)
• Selector de atributo con separación por espacios (Attribute Selector with Whitespace)
• Selector de atributo con separación por guion (Attribute Selector with Hyphen)

6.2 Selector de atributo

El selector de atributo escoge elementos, que tienen el atributo especificado, independientemente de su valor.

Sintaxis:

    
      [atributo] {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

    
      /* Selecciona todos los elementos que tienen el atributo title */
      [title] {
        color: blue;
      }
    
  

    
      <p title="Este es un título">Este texto será azul.</p>
      <p>Este texto no será azul.</p>
    
  

6.3 Selector de atributo con valor

El selector de atributo con valor escoge elementos, cuyos atributos tienen el valor especificado.

Sintaxis:

    
      [atributo="valor"] {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

    
      /* Selecciona todos los elementos cuyo atributo title tiene el valor "Ejemplo" */
      [title="Ejemplo"] {
        color: green;
      }
    
  

    
      <p title="Ejemplo">Este texto será verde.</p>
      <p title="Otro ejemplo">Este texto no será verde.</p>
    
  

6.4 Selector de atributo con prefijo

El selector de atributo con valor inicial escoge elementos cuyos atributos comienzan con el valor especificado.

Sintaxis:

    
      [atributo^="valor"] {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

    
      /* Selecciona todos los elementos cuyo atributo title comienza con "Inicio" */
      [title^="Inicio"] {
        color: red;
      }
    
  

    
      <p title="Inicio de texto">Este texto será rojo.</p>
      <p title="No inicio">Este texto no será rojo.</p>
    
  

6.5 Selector de atributo con sufijo

El selector de atributo con valor final escoge elementos cuyos atributos terminan con el valor especificado.

Sintaxis:

    
      [atributo$="valor"] {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

    
      /* Selecciona todos los elementos cuyo atributo title termina con "fin" */
      [title$="fin"] {
        color: orange;
      }
    
  

    
      <p title="Este es el fin">Este texto será naranja.</p>
      <p title="Este es el inicio">Este texto no será naranja.</p>
    
  

6.6 Selector de atributo que contiene una subcadena

El selector de atributo que contiene un valor escoge elementos cuyos atributos contienen el valor especificado.

Sintaxis:

    
      [atributo*="valor"] {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

    
      /* Selecciona todos los elementos cuyo atributo title contiene "medio" */
      [title*="medio"] {
        color: purple;
      }
    
  

    
      <p title="Este es el medio del texto">Este texto será púrpura.</p>
      <p title="No hay medio aquí">Este texto no será púrpura.</p>
    
  

6.7 Selector de atributo con separación por espacios

El selector de atributo con separación por espacios escoge elementos cuyo atributo contiene uno o más valores separados por espacios. Es útil para seleccionar elementos con ciertas clases o roles.

Sintaxis:

    
      [atributo~="valor"] {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

    
      /* Selecciona todos los elementos cuyo atributo class contiene "highlight" en la lista de clases */
      [class~="highlight"] {
        background-color: yellow;
      }
    
  

    
      <p class="highlight special">Este texto tendrá fondo amarillo.</p>
      <p class="special highlight">Este texto también tendrá fondo amarillo.</p>
      <p class="special">Este texto no tendrá fondo amarillo.</p>
    
  

6.8 Selector de atributo con separación por guion

El selector de atributo con separación por guion escoge elementos cuyo atributo contiene el valor especificado o comienza con el valor especificado seguido por un guion.

Sintaxis:

    
      [atributo|="valor"] {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

    
      p[lang|="ru"] {
        font-style: italic;
      }
    
  

    
      <p lang="ru">Este texto será cursiva.</p>
      <p lang="ru-RU">Este texto también será cursiva.</p>
      <p lang="en">This text will not be italicized.</p>
    
  

1

Опрос

Fundamentos de CSS,  12 уровень,  6 лекция

недоступен

Fundamentos de CSS

Fundamentos de CSS

Открыть