I have an issue with removing the class
<div>
<div class="categoryname current-category">Category block</div>
<div class="categoryname">Category block</div>
</div>
I am trying to display only block with class "categoryname current-category"
I try this CSS code:
.categoryname{
display:none;
}
.categoryname:first-child{
display:block;
}
But that CSS code every time display first category, I am looking to only display block with "current-category" class, Some pages have a situation that class "current-category" is on other block:
<div>
<div class="categoryname">Category block</div>
<div class="categoryname current-category">Category block</div>
</div>
When styling an element that contains more than one class you need to write the classnames without spaces
.categoryname{
display: none;
}
.categoryname.current-category{
display: block;
}<div>
<div class="categoryname current-category">Category block</div>
<div class="categoryname">Category block</div>
</div>The issue is related to the CSS Specificity.
Specificity is by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. - MDN
In your case, due to using pseudo-class, the specificity of the second CSS increases which will always apply by overriding the first CSS that you have written.
<element class="categoryname">: Selector Specificity: (0, 1, 0)
<element class="categoryname" :first-child>: Selector Specificity: (0, 2, 0)
So to fix your problem:
.categoryname {
display: none;
}
.categoryname .current-category {
display: block; //Specificity: (0, 2, 0)
}
For more details on the concept visit the official MDN Document: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity