How to target node text?

Question

I am aiming a page with a structure

<div class="x">
    <span>This should be visible</span>
    <span>This should be visible</span>
    This shouldn't be.
</div>

This is not a page that I own, so I cannot change the structure or add tags. I just create a custom stylesheet, I can only use CSS.

My first thought was to try

div.x { display: none; }
div.x span { display: inline; }

But this seems to just hide the whole element independently.

Answer 1

Property Usage visibility :

One approach to hiding the text of a node is to set the content of the element visibility: hiddenin the parent divand then override it for span.

visibility: hidden , , node (. ) - .

div.x {
  visibility: hidden;
}
div.x span {
  visibility: visible;
}

<div class="x">
  <span>This should be visible</span>
  <span>This should be visible</span>
  This shouldn't be.
  <span>Some other tag</span>
</div>

Hide result

---

font-size :

font-size: 0px , span.

, , font-size .

div.x {
  font-size: 0px;
}
div.x span {
  font-size: 16px;
}

<div class="x">
  <span>This should be visible</span>
  <span>This should be visible</span>
  This shouldn't be.
  <span>Some other tag</span>
</div>

Hide result

---

color :

- color: transparent ( Paran0a) , span.

, , , , , (. ).

div.x {
  color: transparent;
}
div.x span {
  color: black;
}

<div class="x">
  <span>This should be visible</span>
  <span>This should be visible</span>
  This shouldn't be.
  <span>Some other tag</span>
</div>

Hide result