• Ejemplos

    Ejemplos Prácticos de Selectores de Atributos CSS

    Seguro ya conoces los selectores de atributos de CSS, pero ¿conoces todas las variaciones y que usos prácticos se les puede dar?. En este tutorial veremos todos los tipos de selectores de atributo disponibles y ademas algunos ejemplos aplicables que tal vez te sean de utilidad.

    Nota: En este tutorial voy a utilizar CodePen para los ejemplos, para un mejor entendimiento recuerda mirar el codigo en el orden: HTML » CSS » Resultado.

    ¿Qué son los selectores de atributos CSS?

    Son selectores que se basan en el atributo del elemento HTML para seleccionarlo, se usan corchetes [].

    Por ejemplo si tenemos un:

    <p align="right">
    
    </p>

    Podemos seleccionarlo en CSS con:

    p[align="right"]{
    
    }

    Tambien se puede obviar la declaración del tipo de elemento y seleccionar unicamente con el atributo:

    [align="right"]{
    
    }

    Existen una serie de variaciones en las cuales podemos refinar la selección siendo mas especificos, si tienes conocimiento de expresiones regulares, esto te sera facil ya que los términos son similares.

    Ejemplos

    1. [attr=valor]

    El uso mas básico, donde se declara exactamente el atributo y el valor indicado que este debe llevar para que sea seleccionado.

    Ejemplo:

    Digamos que tenemos una serie de elementos input y como sabemos, estos tienen que llevar el atributo type en donde se declara que tipo de campo sera, mediante los selectores de atributo podemos estilizar cada uno de los tipos de input individualmente sin declararle clase alguna:

    <input type="text"> <input type="password"> <input type="submit"> <input type="reset">Check out this Pen!

    2. [attr^=valor]

    Esta variación seleccionará a los elementos que tengan ese atributo y cuyo valor declarado comience con lo que se indica.

    Ejemplo:

    Un uso práctico seria por ejemplo ponerles iconos a una serie de enlaces a redes sociales, donde detectamos a que red social esta enlazando (el enlace debe empezar con http://face…) y de acuerdo a ello ponemos el icono respectivo:

    <a href="http://facebook.com/webtursos"></a> <a href="http://twitter.com/webtursos"></a> <a href="http://youtube.com/webtursos"></a>Check out this Pen!

    3. [attr$=valor]

    Este selector es lo invertido al anterior, seleccionará a los elementos que tengan ese atributo y cuyo valor declarado termine con lo que se indica.

    Ejemplo:

    El uso mas común que se le da a este tipo de selector es para estilizar enlaces de descarga de archivos, en el cual la ruta termina en el formato de archivo (http://…/documento.doc), el cual usamos para hacer una selección individual:

    <a href="archivo.pdf">Descargar PDF</a> <a href="archivo.doc">Descargar DOC</a> <a href="archivo.xls">Descargar XLS</a>Check out this Pen!

    4. [attr*=valor]

    Este selector es el que tiene mas alcance, ya que como ven lleva el *, lo que indica que es global, va a seleccionar el elemento que tenga el valor indicado este donde este.

    Ejemplo:

    Un ejemplo práctico es cuando trabajamos con los menús de WordPress y queremos aplicar estilo al elemento activo o current, pero WordPress nos añade un montón de clases y al final no logramos lo cometido o terminamos con un CSS muy desordenado, para estos casos podemos usar el selector de atributo global *=:

    <ul> <li><a href="">Item 1</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category current-category-ancestor current-menu-ancestor current-menu-parent current-category-parent"><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> </ul>Check out this Pen!

    5. [attr~=valor]

    Esta variación seleccionará a los elementos que tengan ese atributo y cuyo valor declarado este entre espacios.

    Ejemplo:

    Esta tipo de selector se usa casi siempre para seleccionar elementos que tengan atributos con multiples valores, tales como el atributo rel de un a, en este ejemplo tendremos un par de parrafos en los cuales habran varios enlaces a los que les pondremos multiples valores rel, pero colorearemos de verde solo los que sean external:

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id <a href="#">pulvinar</a> odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam <a href="#" rel="external">consectetuer</a>. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim <a href="#" rel="nofollow external">nibh</a> eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla <a href="#" rel="external friend">consequat</a> libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros. Check out this Pen!

    6. [attr|=valor]

    Esta variación seleccionará a los elementos que tengan ese atributo y cuyo valor declarado este entre guiones.

    Ejemplo:

    Para este selector haremos un ejemplo un poco mas complicado: lo usaremos para hacer una pequeña grilla CSS, en la cual las propiedades se aplicaran a las columnas solo por el hecho de que la clase de estas contenga la palabra grid-, seguido ira el numero que indique el ancho de esa columna:

    <div class="wrap"> <div class="grid-8"></div> <div class="grid-4"></div> </div>Check out this Pen!

    Compatibilidad

    Cada uno de estos selectores funciona perfectamente en todos los navegadores modernos. Incluso Internet Explorer lo viene soportando a partir de la version 7.

  • Josue Ochoa

    Hola, soy el editor de este blog, trabajo como desarrollador web freelance, sígueme en Twitter.

  • Tal vez te interese