Tengo un problema con la eliminación de la clase.
<div> <div class="categoryname current-category">Category block</div> <div class="categoryname">Category block</div> </div>Estoy tratando de mostrar solo el bloque con la clase "categoryname current-category"
Intento este código CSS:
.categoryname{ display:none; } .categoryname:first-child{ display:block; }Pero ese código CSS cada vez que muestra la primera categoría, estoy buscando mostrar solo el bloque con la clase "categoría actual". Algunas páginas tienen una situación en la que la clase "categoría actual" está en otro bloque:
<div> <div class="categoryname">Category block</div> <div class="categoryname current-category">Category block</div> </div>Al diseñar un elemento que contiene más de una clase, debe escribir los nombres de clase sin espacios
.categoryname{ display: none; } .categoryname.current-category{ display: block; } <div> <div class="categoryname current-category">Category block</div> <div class="categoryname">Category block</div> </div>El problema está relacionado con la especificidad de CSS.
La especificidad es por lo que los navegadores deciden qué valores de propiedad CSS son los más relevantes para un elemento y, por lo tanto, se aplicarán. - MDN
En su caso, debido al uso de pseudo-clase, aumenta la especificidad del segundo CSS que siempre se aplicará al anular el primer CSS que ha escrito.
<element class="categoryname">: Selector Specificity: (0, 1, 0) <element class="categoryname" :first-child>: Selector Specificity: (0, 2, 0)Así que para solucionar tu problema:
.categoryname { display: none; } .categoryname .current-category { display: block; //Specificity: (0, 2, 0) }Para obtener más detalles sobre el concepto, visite el documento oficial de MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity