CODEWITHSUNDEEP
javascripthtmljquerycss
Jacob Stuard
Jacob Stuard

Reputation: 101

Removing <div> with specific value

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>

Upvotes: 1

Views: 85

Answers (2)

tanvi
tanvi

Reputation: 1

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

Upvotes: 0

ahsan
ahsan

Reputation: 1504

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>

Upvotes: 2

Related Questions