CSS - Select text elements

Question

I want to select everything after the div with class="good" and make them disappear.

<div class="amazing">
    <div class="good"></div>
    "bad text"
    <a class="bad"></a>
    "worse text"
    <a class="worse"></a>
</div>

I tried this but it didn't get rid of the texts.

.amazing a:nth-last-child(n+4) {
    display: none !important;
}

That's an invalid HTML structure. Try closing the `` with `` first. And close the last `div` `` too. — Roy Bogado, Apr 17 '19 at 08:01
@NoobCoder Posting "just an example" doesn't help. We need the real code, or at least, something resembling the real code, before we even can think about a solution. With your current example, the solution to the question asked is to hide everything in the container div. `.amazing {height:0; overflow:hidden;}` — Mr Lister, Apr 17 '19 at 08:19
@MrLister This actually worked! Thank you. Can you explain the code though, how it works. — NoobCoder, Apr 17 '19 at 08:24
`height:0` sets the height to 0 and `overflow:hidden` hides the overflow. This works because there is nothing in the container before the `good` div, so there is nothing that needs to be shown. — Mr Lister, Apr 17 '19 at 08:28

Amélie Dupré · Answer 1 · 2019-04-17T08:36:30.897

0

Try this:

<div class="amazing">
    <div class="good">This is good</div>
    <a class="bad">bad text</a>
    <a class="worse">worse text</a>
</div>

and

.amazing a {
    display: none !important;
}

edited Apr 17 '19 at 08:36

answered Apr 17 '19 at 08:23

Amélie Dupré

Chris_00 · Answer 2 · 2019-04-17T09:27:57.643

0

If I understand it well, you wish to hide all texts after the div of .good

/*Select All But The First One*/
.amazing div:nth-child(n+2) {
  display: none !important;
}

<div class="amazing">
  <div class="good">"good text"</div>
  <div class="bad">"bad text"</div>
  <div class="worse">"worse text"</div>
</div>

edited Apr 17 '19 at 09:27

answered Apr 17 '19 at 09:17

Chris_00

2 Answers2