selectores - Precedencia en los conflictos de especificidad del selector de CSS(tipo vs. selector de clase)
selectores css (2)
Aprendí acerca de la precedencia del selector de este tutorial . Tengo problemas para entender el comportamiento de esto en un caso. Tengo un elemento en HTML:
<input class="top_bar_login_form_input" type="text" name="email" placeholder="Prijavno ime">
El problema es que las propiedades de otro selector anulan las propiedades de la clase.
Como se muestra en la imagen de arriba, la clase queda anulada por un selector menos específico. El elemento se selecciona mediante la input[type="text"] , que es menos específica que una clase. El único razonamiento detrás de este comportamiento que veo es que la clase .inputbox también se calcula para determinar la precedencia, aunque no coincida con el elemento.
¿Por qué el selector de tipos anula el selector de clases?
Su elemento coincide con la input[type="text"] en la primera regla. Aunque los selectores de .inputbox no coinciden, eso no afecta a la precedencia porque una lista de selectores separados por comas solo cuenta por el selector más específico en la lista que hace juego con un elemento. Si ninguno de los selectores coincide, entonces no cuenta en absoluto.
La razón por la que la primera regla prevalece sobre la segunda es porque los selectores de clases y los selectores de atributos tienen la misma especificidad . El selector de tipo de input acompaña (o va acompañado de) el selector de atributo es lo que hace que supere al selector de clase solitario:
/* 1 attribute, 1 type -> specificity = 0-1-1 */
input[type="text"]
/* 1 class -> specificity = 0-1-0 */
.top_bar_login_form_input
Por lo tanto, es el primer selector más específico que el segundo, y no al revés.
Si califica el selector de clase con un tipo para que tenga input.top_bar_login_form_input , los selectores estarán equilibrados y su segunda regla anulará la primera.
Respuesta de TL; DR
La primera regla es más específica que la segunda porque tiene un tipo y una parte de atributo para el selector, y por lo tanto tiene prioridad:
input[type="text"] { } /* type + attribute for specificity */
.top_bar_login_form_input { } /* only class for specificity, so *less* specificity */
Respuesta más larga
Se podría pensar que el bit type="text" , que es un selector de atributos, es más específico que un selector de clase, de acuerdo con la página MDN sobre especificidad :
La siguiente lista de selectores es al aumentar la especificidad:
- Selectores universales
- Selectores de tipo
- Selectores de clase
- Selectores de atributos
- Pseudo-clases
- Selectores de ID
- Estilo en línea
La cita anterior estaba en el artículo de MDN en el momento en que se escribió esta respuesta.
Por qué eso es engañoso
(Tanques a las percepciones de @ BoltClock).
Lo anterior solo parece correcto, pero eso se debe a que normalmente incluye el elemento en el selector (por ejemplo, input[type="text"] ) al hacer un selector de atributos. Sin embargo, lo que es astuto: el bit de input importa.
Supongamos que tenemos el siguiente marcado:
<input class="my-class" type="text" value="some value" />
En el siguiente escenario, la entrada se vuelve roja :
[type="text"] { color: green; }
.my-class { color: red; } /* last rule matched */
Si invertimos las reglas en un escenario , la entrada se volverá verde :
.my-class { color: red; }
[type="text"] { color: green; } /* last rule matched */
Esto se debe a que ambos selectores tienen la misma especificidad. Ahora, al introducir el selector de input en la regla de atributo, uno de ellos será más específico, lo que se puede ver en este escenario :
input[type="text"] { color: green; } /* most _specific_ rule matched */
.my-class { color: red; }
La especificación W3 hace que me duela la cabeza, pero tiene los detalles sobre por qué funciona lo anterior. Consulte también la respuesta de @BoltClock y los comentarios en esos ejemplos de código para obtener información sobre cómo se calcula la especificidad.