css - specificity - ¿Cómo puedo anular un selector con muchas negaciones(: no)?

css tricks specificity

Question

Por ejemplo, para escribir entradas estándar, escribo algo así como:

input:not([type="checkbox"]):not([type="radio"]) {
    background-color: blue;
}

Sin embargo, eso aumenta mucho la especificidad así que si quiero anularlo usando una clase, tengo que hacer algo como:

.red.red.red {
    background-color: red;
}

¿Hay alguna manera de disminuir la especificidad del selector de entrada original sin cambiar la funcionalidad?

Answer 1

Desafortunadamente, en Selectores 3, eso es lo mejor que puede hacer, ya que :not() solo acepta un solo selector simple. Habiendo dicho eso, el selector en su regla primordial puede ser reemplazado por input.red.red - no necesita más selectores de clase que los selectores de atributos a menos que esa regla tenga que aparecer antes en la hoja de estilo.

Este es otro problema que los Selectores 4 resuelven con su mejora de :not() : especificidad. En Selectores 4, podrá reemplazar todas esas negaciones con solo uno :not() pseudo, disminuyendo efectivamente su especificidad dentro de su selector original a solo un selector de atributos. De la sección 16 :

La especificidad de a: not () pseudo-class se reemplaza por la especificidad del selector complejo más específico en su argumento de lista de selector.

Como cualquier selector de atributos es igualmente específico para un selector de clases, la especificidad de cualquier número de selectores de atributos solitarios en una lista nunca será mayor que la de solo uno de ellos. Esto le permite salirse con la suya usando solo un selector de clase para su anulación sin tener que repetirlo.

Lo siguiente funciona en Safari como una prueba de concepto:

/* 1 type, 2 attributes -> specificity = (0, 2, 1)
input:not([type="checkbox"]):not([type="radio"]),
   1 type, 1 attribute  -> specificity = (0, 1, 1) */
input:not([type="checkbox"], [type="radio"]) {
    background-color: blue;
}

/* 1 type, 1 class      -> specificity = (0, 1, 1) */
input.red {
    background-color: red;
}

<input type="checkbox">
<input type="radio">
<input type="text">
<input class="red" type="text">

Answer 2

Esto puede ayudarlo a resolver el problema de la especificidad:

input:not([type="checkbox"]):not([type="radio"]):not(.red)) {
    background-color: blue;
}

.red {
  background-color: red;
}

<input type="checkbox"><br>
<input type="radio"><br>
<input class="red">