Create a css rule for all elements except one class?

Question

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.

can't you wrap Some text in some tag? P.S you probably meant to write .portfolio-descr *:not(h3) { ... } — Aziz
– Aziz, Commented Dec 18, 2016 at 5:26
Possible duplicate of css hide text node but show its children — Aziz
– Aziz, Commented Dec 18, 2016 at 5:34
If you cannot change the HTML, please add that fact to your question. — user663031
– user663031, Commented Dec 18, 2016 at 7:07
The question which was suggested as a dup target has a number of good solutions, including using margins and/or a font size of zero. — user663031
– user663031, Commented Dec 18, 2016 at 7:20

Paweł · Accepted Answer · 2016-12-18 05:39:11Z

3

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>

answered Dec 18, 2016 at 5:39

Paweł

4,5466 gold badges26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user663031 Over a year ago

But I believe this will leave empty space where the "Some text" was, and that may not be what the OP wants.

RIYAJ KHAN · Accepted Answer · 2016-12-18 14:26:11Z

2

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

edited Dec 18, 2016 at 14:26

answered Dec 18, 2016 at 5:27

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

2 Comments

RIYAJ KHAN Over a year ago

Please check plunker.Its working .Please inspect html wheather there any other css overwriting

user663031 Over a year ago

I do not believe this will hide "Some text" as the OP wants.

Geeky · Accepted Answer · 2016-12-18 05:41:53Z

0

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

edited Dec 18, 2016 at 5:41

answered Dec 18, 2016 at 5:28

Geeky

7,5142 gold badges28 silver badges52 bronze badges

1 Comment

user663031 Over a year ago

I don't think this does what you think it does. The .portfolio-descr:not(h3):not(span) selects an element which both has the .portfolio-descr class, and is itself neither an h3 nor a span. Your code only works because the h3 does not inherit background color.

Collectives™ on Stack Overflow

Create a css rule for all elements except one class?

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related