CODEWITHSUNDEEP
htmlcss
tuanptit
tuanptit

Reputation: 413

Create a css rule for all elements except one class?

I have a html like this: 

<div class="portfolio-descr">
    <span class="posted-in"></span>                             
    <h3><a href="">Name</a></h3>           
    Some text <!-- HIDE THIS -->
</div>

I want to hide Some text but not the <h3> tag, purely with CSS like this:

.portfolio-descr:not(h3) {
  display:none;
}

But all the elements are hidden.

Upvotes: 2

Views: 3538

Answers (3)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

put space between parent class and descendant h3 otherwise h3 considered as part of parent class portfolio-descr

.portfolio-descr > :not(h3) {
    display:none;
}

Correct HTML :

Put some text inside inline/block html element as per need

<div class="portfolio-descr">
    <span class="posted-in"></span>
    <h3><a href="">Name</a></h3> <span>Some text</span>
  </div>

Working plunker

Upvotes: 2

Geeky
Geeky

Reputation: 7488

If you want to hide just the text but not h3 and span tags,one of the options is to make the font-color and background to be the same

check this snippet

.portfolio-descr:not(h3):not(span) {
  color: white;
  background: white;
}
<div class="portfolio-descr">
  <span class="posted-in"></span> 
  <h3><a href="">Name</a></h3> Some text
</div>

Hope it helps

Upvotes: 0

Paweł
Paweł

Reputation: 4516

If you use display property it will affect both parent and its children, but you can use visibility property to achieve your goal. (I added some text to .posted-in span to show the result better)

.portfolio-descr{
  visibility:hidden;
}

.portfolio-descr>*{
  visibility:visible;
}
<div class="portfolio-descr">
        <span class="posted-in">abc</span>                             
        <h3><a href="">Name</a></h3>           
        Some text
</div>

Upvotes: 3

Related Questions