Skip to content
Advertisement

Removing 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>

Advertisement

Answer

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>
User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement