¿Por qué utilizar un selector de atributos para hacer coincidir clases?

85

Encontré un ejemplo de plantillas de correo electrónico receptivas donde hay selectores de CSS como los siguientes:

a[class="btn"]

¿Por qué se usa esta sintaxis si es totalmente la misma que:

a.btn

¿Tiene algún impacto en los navegadores móviles o en cualquier otra cosa?

css css-selectors ducin
fuente
5
@Jevgeni Bogatyrjov: Esa es una pregunta totalmente diferente que ni siquiera está relacionada con CSS, pero puedo ver cómo podría haber sido confuso debido al título incorrecto. Lo he editado.
BoltClock

Respuestas:

142

La []sintaxis es un selector de atributos .

a[class="btn"]

Esto seleccionará cualquier <a>etiqueta con class="btn". Sin embargo, no seleccionará <a>cuál tiene class="btn btn_red", por ejemplo (mientras que lo a.btnharía). Solo coincide exactamente con ese atributo.

Es posible que desee leer Los 30 selectores de CSS que debe memorizar . Es invaluable para cualquier desarrollador web prometedor.

Eric
fuente
pero no tiene nada que ver con la capacidad de respuesta, es pura sintaxis CSS, ¿verdad?
ducin
2
@tkoomzaaskz Correcto.
Eric
También encontré el mismo tutorial ( campaignmonitor.com/guides/mobile/coding ): parece extraño que usen esta técnica en un tutorial. Los tutoriales deben dejar las cosas lo más claras posible para las personas que comienzan. Especialmente cuando el .btnselector común sería suficiente. ¿Me estoy perdiendo algo? ¿Hay algún beneficio en esto? ¿Mayor especificidad, supongo?
nickspiel
¿No hay una nueva forma de seleccionar todos los nombres de clases usando jQuery y corchetes para obtener todas las clases con el mismo prefijo? Algo como $ (this) .css ("[class ~ = 'btn_']", "red"); La sintaxis puede ser incorrecta, pero ¿sabe cuál es la sintaxis correcta?
whyoz
1
Sería genial si actualizara su respuesta para mostrar también los otros tipos de selectores de atributos. La búsqueda de "corchetes del selector de css" hace que aparezca esta pregunta en una búsqueda, y es difícil buscar las otras variaciones ("estrella de corchetes del selector de css").
cimmanon