0

So I tried:

    body :not(.cc) { display: none; }

and various other things I found on here. (!important, * instead of body, ...) I even tried it for a span-element with that class instead of the td-element. Nothing worked.

<html>
<body>
<table><tr><td class="cc">text</td></tr></table>
Other text to not ne shown.
</body>
</html>

Edit: Please excuse I first put a misleading html-snippet here first. I removed that.
Edit2: I added "Other text to not be shown."

John
  • 605
  • 9
  • 28
  • That HTML is not valid. The `` tag may only contain `` and `` tags, and nothing else. [Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html). You're also closing a non-existent `p` tag when you should be closing `span`. –  May 22 '19 at 16:47
  • 1
    Just do `body *:not(.cc) { .... }` but if you are trying to show the `td` then you need to make the table/table row shown as well. You would need to provide more specific code to tell us exactly what need to be shown. – Huangism May 22 '19 at 16:53
  • @Amy I shouldn't have added that second part, as it doesn't really belong to my question. Please excuse this. I removed that part now. – John May 22 '19 at 16:54
  • @Huangism: Doesn't work. Just does the same as `body:not(.cc) { .... }` – John May 22 '19 at 16:56
  • @John I updated my comment. The code works if you just have an element with the cc class. Based on your title, it looks like you want to show a td which can get more complicated. Read my previous updated comment and update the question – Huangism May 22 '19 at 16:57
  • The question would be clearer and easier to answer if you explicitly stated what "Nothing worked" means. E.g. it could mean that the ``display:none`` wasn't applied to anything, or it could mean that it was applied to everything, or it could mean something completely different. – Ray Butterworth May 24 '19 at 13:26

3 Answers3

2

You will need something like this

body *:not(table):not(tr):not(td):not(tbody),
td:not(.cc) {
  display: none;
}
<table>
  <tr>
    <td>hide</td>
  </tr>
  <tr>
    <td class="cc">show</td>
  </tr>
  <div>Other text to not be shown.</div>
</table>

Basically, hide everything in body except table elements, then the second rule hides td that is not .cc class. I added tbody because some browsers will automatically add this to your tables. The basic rule of thumb is, you cannot hide any parents that contains the element you want to show.

As far as the text is concerned, you need to wrap the text in an element so you can target it with css. Currently it is wrapped by the body tag and you cannot hide the body tag or else nothing will be shown.

You can refer to this question for the text node styling Is there a CSS selector for text nodes?

Huangism
  • 16,278
  • 7
  • 48
  • 74
  • Got it working on my html-file, but it's very fragile. When instead of the plain text "show" using `show` inside the `td`, then it already doesn't work anymore. - And it doesn't hide text that is simply in between the ``-tags without any other tags like span or div around. – John May 22 '19 at 17:17
  • I added "Other text to not be shown." in my question's example. That isn't caught by the current css. :/ Could you help please? – John May 22 '19 at 17:28
  • @John You need to wrap that text in an element to hide it, you cannot target text nodes with css. So wrap it with a div for example and it will hide automatically. I have updated my answer to reflect this. Please only edit your question and not the answer unless the modification is formatting or has no conflicting interest – Huangism May 22 '19 at 17:50
  • I would be pretty surprised if that text is not modifieably by css. - I regret to having too fast accepted your answer, but that was partly because of my question not on the point enough in it's first version. I'm pretty sure there is much easier css to target the `td`. - Did I edit your answer? I can't remember. – John May 24 '19 at 01:11
  • @John With your given markup, there isn't an easier way to target the td because it is nested in table elements and you simply cannot hide any of the table elements or the td will be hidden. As far as the text node is concerned, unless you wrap it, there is no way to target it in css – Huangism May 24 '19 at 12:53
  • Probably you are right. I'll let the question open for a couple of days. I didn't want to sound anyway harsh, I'm just always anew surpised that even with the elaborated www-standards seemingly easy things are complicated. Though using `* { display:none }` hides even the unwrapped textnode, so it's accessible via css at least. - I even remember to have read once some years ago how exactly those unwrapped texts are handled by the browsers accordingly to the standards, but I have forgotten where I read it. :/ - Is it probably placed in the dom tree as sibling of the body-element? – John May 24 '19 at 22:44
  • @John sorry but your surprise is due to your lack of understanding of css and how it works. `*` works is because that targets all selectors which includes the body tag and html tag, if you hide the body tag then of course the text is hidden but so will everything else and that's not what you want. It is just as simple to wrap your text with something and to be honest, 99.9% of the time, plain text is wrapped in something that's not the body tag. – Huangism May 27 '19 at 12:00
1

You cant show .cc class because its inside hidden body! u can do this if u want

p:not(.cc) { 
display: none; 
}
    <p>text get's hidden</p>
    <p class="cc">text doesn't get hidden</p>
    <p>
    hello world!
    </p>
John
  • 605
  • 9
  • 28
adel
  • 3,436
  • 1
  • 7
  • 20
0

Why don't you simply first set none for everything and the block for your class:

    body { display : none ; }
    .cc  { display : block; }
Abscon Ditus
  • 1
  • 1
  • 1
    Your entire body will be hidden and since `.cc` is inside of body, it will not show. The effect of this, is the same as not defining your second rule at all – Huangism May 22 '19 at 16:50