La prioridad de estilo CSS no funciona como se esperaba

Tengo dos estilos, cada uno declarado en su control independiente de terceros que no juegan bien juntos y ni siquiera estoy seguro de por qué es eso y, en última instancia, cómo hacer que funcionen como quiero.

HTML:

normal cell error cell

CSS:

 .myrow>td { /* declared in the grid component */ background-color: #88f; } .ui-state-error { /* declared in jQuery UI */ background-color: #f00; } 

Tanto HTML como CSS simplificados para mostrar el error exacto. Aquí está el violín .

El resultado final aquí es que ambas celdas muestran un fondo azul (FF 46.0).

Sin embargo, esperaría que el .ui-state-error sea ​​más específico, ya que se aplica directamente a la celda en cuestión en comparación con la regla .myrow>td que parece más general a primera vista.

En cualquier caso, el navegador decide aplicar .myrow>td CSS y quiero hacer que aplique el .ui-state-error .

¿Cómo puedo hacer eso teniendo en cuenta que los estilos CSS en sí mismos no están bajo mi control?

    Las dos reglas se aplican directamente a la celda: una es a través de la class y otra a través del tipo de elemento. Dado que el selector con tipo de elemento tiene otro selector de class adjunto, tiene más especificidad y, por lo tanto, gana.

    La especificidad de .ui-state-error selector es 010 porque tiene solo un selector de clase como parte del selector complejo mientras que el. myrow > td selector es 011, ya que tiene una clase y un selector de tipo de elemento como parte del selector complejo.

    Puede cambiar el selector como se indica a continuación para hacer que el error td tenga un fondo rojo.

     .myrow > .ui-state-error { background-color: #f00; } 

    Cambiar el selector como arriba no anulará todos los otros estilos . Anulará solo los selectores que tienen una especificidad inferior a 010 y se aplicará solo para el elemento que tenga class='ui-state-error cuando su antepasado tenga class='myrow' .

    Si el myrow es una clase específica de tema y desea que los elementos de .ui-state-error sean de color rojo independientemente del tema, puede cambiar el selector como se muestra a continuación:

     tr > .ui-state-error { background-color: #f00; } 

    Esto también tiene una especificidad de 011 y reemplazaría a .myrow > td .


    Hay una calculadora de especificidad disponible en https://specificity.keegan.st/ que le resultará muy útil hasta que se familiarice completamente con los cálculos de especificidad.

    Para ponerlo en términos simples, a continuación se muestra cómo se calcula la especificidad:

    • Calcule el número total de selectores de ID que forman parte del selector completo. Toma esto como a
    • Calcule el número total de selectores de clase, atributo y pseudo-clase que forman parte del selector completo. Toma esto como b .
    • Calcule el número total de selectores de tipo de elemento y pseudo-elemento que forman parte del selector completo. Toma esto como c .

    La especificidad final es a + b + c (concatenación y no sum).

    Tienes que ser más específico ya que ambas reglas se aplican a tu td . Puedes hacerlo así:

     .myrow>td { background-color: #88f; } .myrow>td.ui-state-error { background-color: #f00; } 

    Aquí está el violín actualizado