Selector de atributo

Los selectores de atributos permiten elegir elementos HTML en función de sus atributos y/o valores de esos atributos.

Los tipos de selectores de atributos son los siguientes:

• [nombre_atributo]: selecciona los elementos que tienen establecido el atributo llamado nombre_atributo independientemente de su valor.

  codi.link Copiar

      
  <a href="/services">local</a>
  <br>
  <a href="http://" target="_blank" rel="noopener noreferrer">external</a>
  
  <style>
    a[target]{
      color: red;
    }
  </style>
    

• [nombre_atributo=valor]: selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor.

  codi.link Copiar

          
  <a href="/services">local</a>
  <br>
  <a href="http://" target="_blank" rel="noopener noreferrer">external</a>
  
  <style>
    a[href="/services"]{
      color: red;
    }
  </style>
    

• [nombre_atributo^=valor]: Selecciona aquellas etiquetas cuyo atributo comience por ese valor.

  codi.link Copiar

              
  <a href="/services">local</a>
  <br>
  <a href="https://" target="_blank" rel="noopener noreferrer">external</a>
  
  <style>
    a[href^="https"]{
      color: red;
    }
  </style>
    

• [nombre_atributo$=valor]: Selecciona aquellas etiquetas cuyo atributo acabe en ese valor.

  codi.link Copiar

                      
  <a href="https://www.youtube.com" target="_blank" rel="noopener noreferrer">youtube</a>
  <br>
  <a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">mozilla</a>
  
  <style>
    a[href$=".org"]{
      color: red;
    }
  </style>
    

• [nombre_atributo~=valor]: selecciona los elementos que tienen establecido un atributo llamado nombre_atributo, cuyo valor es una lista de valores, donde alguno es valor.

  codi.link Copiar

                      
  <a href="#" class="icon logo image">logo</a>
  <br>
  <a href="#" class="icon image">icon</a>
  
  <style>
    a[class~="logo"] {
      color: red;
    }
  </style>
    

• [nombre_atributo|=valor]: selecciona los elementos que tienen establecido un atributo llamado nombre_atributo, cuyo valor empiece por valor o empiece por valor seguido de un "-".Se puede usar para coincidencias de subcódigos en otros idiomas.

  codi.link Copiar

                   
  /*
    Selecciona todos los elementos de la página cuyo atributo «lang» empiece por «es», 
    es decir, «es», «es-ES», «es-AR», etc. 
  */
  *[lang|="es"]{ 
    color : red;
  }