html - prioridad - selectores avanzados css

¿Cómo doy prioridad a una clase CSS sobre una identificación?

Question

Tengo un elemento como este:

#idname{
  border: 2px solid black;
}

.classname{
  border: 2px solid gray;
}

<div id = "idname" class="classname">it is a test</div>

Quiero darle una mayor prioridad a su clase de CSS en lugar de su id de CSS. ¿Es posible? (En otras palabras, quiero establecer gray como border )

Answer 1

Estás haciendo esto al revés. Las reglas de CSS tienen peso, y usted debe aprovechar esas reglas para conectar correctamente estilos.

element = 1 pt
class = 10 pt
id = 100 pt
inline = 1000 pt
!important = 10,000 pt

Considera este artículo sobre especificidad

La cláusula !important , si bien funciona, crea rigidez en las reglas en cascada y resulta demasiado fácil terminar con directivas rivales.

Mi principio básico es "en general" evitar las ID en CSS, y usarlas solo cuando necesite anular una regla existente de clase / elemento.

En definitiva, tú eres el autor. Escriba su regla menos específica como class y anulela con una ID .

De mis más de 14 años construyendo cosas en la web: si tiene que usar una cláusula !important , lo está haciendo mal. Lo considero muy mal.

Eso dicho a veces sucede. Usted hereda la terrible CSS de otra persona, puede ser difícil de evitar.

Answer 2

No utilizar !important porque es la peor solución, si desea cambiar el estilo, hágalo de esa manera.

#idname{
  border: 2px solid black;
}

#idname.classname {
  border: 2px solid gray;
}

<div id = "idname" class="classname">it is a test</div>

Si desea apuntar también a otros elementos con el nombre de clase class y no solo el #idname , utilice:

#idname.classname, .classname {
  border: 2px solid gray;
}

Answer 3

Lo que en realidad estás preguntando es cómo dar a una clase una especificidad mayor que una ID.

Una ID tiene una especificidad relativamente alta de 100. Una clase tiene una especificidad de 10.

Hay muchas maneras de aumentar la especificidad de un selector.

Aquí hay algunos métodos:

#idname.classname

Ahora este selector tiene una especificidad de 110.

div#idname.classname

Ahora este selector tiene una especificidad de 111 (porque un elemento tiene una especificidad de 1).

div[class="classname"]

Este selector no podrá anular un selector de ID, porque un selector de atributos tiene una especificidad de 10, y la especificidad total para el selector es solo 11.

La anotación !important

Si bien la especificidad se aplica a los selectores, la anotación !important aplica a la declaración. Tiene el poder de anular todos los puntos de especificidad.

.classname { ...  !important; }

Usted puede pensar en !important como tener una especificidad de 10000, como se ilustra en este sitio web de especificidad . Aunque técnicamente !important no participa en la especificidad y no tiene puntos de especificidad.

Más información:

• Especificidad de CSS
• Especificidad de CSS: cosas que debes saber
• Relación entre! Importante y CSS especificidad