JSFiddle - React, Tailwind, and code Playground

by Felipe Gavilán

HTML

<input type="text" att1="abc-123-hij" />
    <br /><br />
    <input type="number" att1="xyz-456-hij" />
    <br /><br />
    <input type="password" att1="xyz-789-hij" />
    
    <div att1="abc-123">
      hola
    </div>
    
    <div att1="abc-456" att3="pirata">
      hola de nuevo
    </div>

JavaScript

// Cuando cargue la página, ejecuta esta función
    $(document).ready(function(){
    
    // Seleccionamos por el valor del atributo type
    $("[type='text']").css("background-color", "red");
    
    // Seleccionamos todos los elementos que tienen el
    // atributo att1 y su valor empieza por xyz
    $("[att1^='xyz']").css("background-color", "green");
    
    // Seleccinonamos todos los elementos que tienen el
    // attributo att1 y su valor termina por 123
     $("[att1$=123]").css("background-color", "blue");
    
    // seleccionamos todos los elementos que tienen el
    // atributo att3
    $("[att3]").css("background-color", "gray");
    
    /* Si queremos, podemos combinar los selectores, aquí
     seleccionamos todos los elementos que tienen el atributo
     att1, y que tienen el atributo att3 y el valor de este
     es pirata */
    //$("[att1][att3=pirata]").css("background-color", "red");
    });