Hoy vamos a aprender sobre los selectores de atributos. ¿Qué son? ¿Cómo los uso? ¿Cuáles son los nuevos selectores de atributos CSS3? Contestaremos estas preguntas y más.
Atributos HTML
Antes de presentarle el concepto de selectores de atributos CSS, debe saber qué es un atributo HTML. La buena noticia es que ya estás familiarizado con varios de ellos: clase, carné de identidad, estiloy href por ejemplo. Sin embargo, hay una tonelada más, visite W3.org para obtener una lista completa.
CSS hace que el estilo de algunos atributos sea fácil. Por ejemplo, si queremos estilizar un carné de identidad o clase, solo usamos lo siguiente.
Todo esto está muy bien, pero ¿y si queremos diseñar algunos otros atributos? Aquí es donde los selectores de atributos entran en juego.
Selectores de atributos
Como acabamos de aprender, los selectores de atributos son exactamente lo que parecen, una forma de seleccionar y apuntar atributos específicos mediante CSS. Esto es realmente fácil de hacer y solo involucra un conjunto de corchetes que contienen el HTML que usaste. Veamos cómo funciona esto mirando primero un código HTML básico.
Digamos que quería apuntar y diseñar solo el enlace Design Shack. Podría usar pseudo selectores, pero esto supone que la lista se mantiene en ese orden y que el soporte del navegador no es el mejor. En su lugar, lo que podemos hacer es usar un selector de atributos para identificar el href específico? que nos interesa
Repetir atributos
Otro ejemplo que se usa mucho es una lista de contactos, uno o más de los cuales deben tener un estilo de cierta manera. Usando atributos, podemos diferenciar entre amigos y contactos.
Luego podemos entrar y diseñar cada uno de estos rel atributos de manera diferente utilizando la misma sintaxis que el anterior. Al igual que con una clase, varios elementos pueden cumplir los criterios en una declaración.
Usando este código podemos lograr los resultados a continuación. Tenga en cuenta que incluso si comenzamos a agregar nuevos contactos a la parte superior de la lista, estos selectores seguirán funcionando donde : nth-child no lo haría Bastante bien verdad? Además, casi todos los navegadores actuales son compatibles con estos, incluido IE de nuevo a la versión 7.
También es importante tener en cuenta que no tiene que ser tan específico. Lo siguiente será estilo. alguna elemento con un rel atributo aplicado.
Manejo de valores multiples
La parte difícil acerca del uso de los selectores de atributos es que se vuelven un poco graciosos cuando hay varios atributos. Considere el siguiente tweak a nuestra lista anterior.
Usted pensaría que diseñar el primer elemento de la lista sería el mismo proceso, ya que todavía tiene "amigo". en ella, pero ese no es el caso. Simplemente usando = 'amigo' ya no apuntará con éxito a esto. En su lugar, tenemos que usar lo siguiente, que busca? Amigo? como uno de los rel valores.
Esto resultará en el? Larry? elemento de la lista en negrita donde como el anterior un [rel = 'amigo'] La sintaxis lo habría perdido.
Selectores de atributo CSS3
CSS3 nos ha dado muchos nuevos juguetes y herramientas geniales para jugar. No es de extrañar, entonces, que también hay algunos nuevos selectores de atributos que nos ayudan a aportar aún más especificidad a nuestra orientación. Vamos a empezar con mi favorito.
Estilo Atributos de nombre similar
Aquí es donde las cosas se ponen increíbles. Digamos que tenías el siguiente HTML y que querías apuntar solo al sección superior y sección inferior, ¿como lo harias?
Una respuesta fácil es el nuevo "Selector de valor de atributo de subcadena arbitraria" o "La pequeña y genial cosa de asterisco". Dado que los dos divs que queremos apuntar a ambos contienen? Sección? en sus nombres, podemos apuntarlos fácilmente.
Me quedé impresionado por esto. Aquí estamos usando CSS para explorar nuestros nombres de ID para encontrar valores específicos dentro de un nombre más grande y apuntar a esos elementos. Esto abre muchas posibilidades y hace que la segmentación compleja con un pequeño margen sea una tarea mucho más fácil.
Principio y final
Mientras que el selector de valor de atributo de subcadena arbitraria se dirigirá a una cadena dada en cualquier parte, las versiones de inicio y finalización permiten que se manejen casos más raros donde solo desea que se considere el primer o el último elemento.
Digamos que queremos apuntar a todos los títeres, haciendo que Larry y Moe sean rojos y Rizos amarillos. Para ello, podemos insertar uso. [title ^ = 'stooge'] para agarrar a todos aquellos con? stooge? como la primera palabra y [title $ = 'stooge'] para agarrar a todos aquellos con? stooge? como la ultima palabra
Encadenamiento de selectores de atributo
Digamos que desea obtener super especifico y agregar en múltiples criterios. Es tan simple como encadenar múltiples selectores de atributos. Veamos cómo funciona esto con el HTML a continuación.
Ahora, vamos a apuntar cualquier enlace con? Stooge? en el título, pero solo los que comienzan con? el?Tenga en cuenta que no queremos apuntar casualmente? porque esto también aparece en el último elemento. Aquí está la sintaxis para lograr esto:
Simple verdad? Todo lo que hicimos fue tomar las dos reglas que necesitábamos y ponerlas en la misma línea. Es importante tener en cuenta que esto no es un escenario de uno u otro, sino de ambos / y. Solo se cambiarán aquellos elementos que cumplan con ambos criterios.
Otras lecturas
Si eres lo suficientemente nerd como para amar los selectores de atributos, hay dos fuentes más que te recomiendo que revises.
Trucos CSS
Primero, Chris Coyier tiene una introducción muy completa en CSS Tricks que cubre gran parte del mismo contenido que cubrimos aquí. ¡Chris es un super genio de CSS y probablemente los explica mucho mejor que yo!
El libro de CSS3
A continuación, echa un vistazo a El libro de CSS3 de Peter Gasston, que ha sido mi principal referencia para todas las cosas de CSS3 últimamente. ¡Simplemente no puedo tener suficiente de este libro y le he dado una posición permanente en mi escritorio! Gasston se suma a esta conversación con una discusión sobre Combinadores de hermanos generales y adyacentes, que son otra forma interesante de apuntar a ciertos elementos. Tome el siguiente HTML como ejemplo:
Ahora, digamos que queríamos apuntar solo a "¡Escójame!" párrafo. El Combinador de Hermanos Adyacentes nos permite hacer precisamente eso. El siguiente código apunta a cualquier pag etiquetas inmediatamente precedidas por una h1 etiqueta. Solo hay uno de estos en el ejemplo anterior (el primer párrafo después del encabezado).
Del mismo modo, el Combinador General de Hermanos nos permitirá apuntar todos del pag Etiquetas que vienen después del encabezado. Así que el primer párrafo no cambiará de color, pero todos los demás lo harán.
Esto es solo una muestra, para más información sobre estos, echa un vistazo al Libro de CSS3.
Soporte del navegador
Como mencioné brevemente más arriba, por lo que puedo decir, está bastante cubierto en la mayoría de estas técnicas hasta IE7 con todas mayor Los navegadores actuales son perfectos. Sin embargo, no es exactamente una puntuación total en general, ya que algunos de los navegadores menos conocidos son un poco irregulares. Puedes encontrar una buena tabla de navegadores y su soporte para todo esto y más en dev.l-c-n.com.
Conclusión
Para ser honesto, muy poco sabía muy poco acerca de los selectores de atributos de CSS. Sin embargo, después de un poco de investigación me sorprendió lo geniales que son y me desconcertó el por qué parecen ser tan raros (el soporte del navegador es mejor que la mayoría de las cosas con las que nos metemos). Con solo un poco de código, puede lograr una orientación muy específica con poco o ningún marcado adicional requerido.
Deje un comentario y hágame saber lo que piensa de los selectores de atributos y si los usa o no alguna vez.