clase - selectores css avanzados

Prioridades de la clase CSS

Question

Tengo una pregunta sobre la prioridad de las clases de CSS después de encontrar un problema hoy. La situación es la siguiente:

Tengo una lista desordenada que tiene una clase asociada con ella. Las etiquetas LI tienen algunos estilos definidos también. Quiero cambiar el estilo de los LI después de un clic (mediante una clase "selected" agregada), pero los estilos de la clase agregada nunca se aplican. ¿Es este comportamiento normal o debería funcionar este código?

CSS:

.dynamicList
{
    list-style: none;
}

.dynamicList li
{
    display: block;
    width: 400px;
    height: 55px;
    padding: 10px 10px 10px 10px;
    border: 1px solid #000;
    background-color: #ff0000;
}

.selectedItem
{
    background-color: #0000ff;
}

HTML:

<ul class="dynamicList">
  <li>First Item</li>
  <li class="selectedItem">Second (Selected) Item</li>
</ul>

El color de fondo del elemento de lista "selected" no se cambia. Este es también el caso si no aplico el estilo al elemento LI , sino que creo otra clase y la aplico a todos los elementos de la lista para que se lea.

<li class="listitem selectedItem">xxxx</li>

Answer 1

Cambie la regla selectedItem a:

.dynamicList li.selectedItem
{
    background-color: #0000ff;
}

Answer 2

Esto suena como un problema de especificidad CSS . Intente cambiar su conjunto de reglas .selectedItem a:

.dynamicList li.selectedItem {
  background-color: #0000ff;
}

Answer 3

La respuesta corta es que su estilo .selectedItem no se está aplicando porque el estilo anterior es más específico y, por lo tanto, tiene una prioridad más alta. Aquí está un resumen decente :

Ahora, hagamos una lista general de las prioridades internas para CSS (3 tiene la prioridad más alta):

element
.class
#id

Este es el orden de prioridad predeterminado. Además de esto, la especificidad también contará, f.ex ul li anulará li. W3C ha hecho una tabla decente sobre cómo debe calcular el peso interno:

LI            {...}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI         {...}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL LI      {...}  /* a=0 b=0 c=3 -> specificity =   3 */
LI.red        {...}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red  {...}  /* a=0 b=1 c=3 -> specificity =  13 */
#list         {...}  /* a=1 b=0 c=0 -> specificity = 100 */

Y aquí está la especificación W3C .

Answer 4

Una pequeña adición que no fue mencionada por el post de cletus.
De acuerdo con el enlace W3C , la prioridad más alta es el atributo de style usado en el elemento / etiqueta html.

Eg si tienes

<a id= bar style="color: red">foo</a>

y

<style>
#bar {
    color: blue;
}
</style>

El color será red porque el estilo html en línea tiene la prioridad más alta, mayor que # .