0

I have a dashboard system. When the user first logs in to their dashboard, a div appears saying "You have been logged in". Every other time they visit the dashboard, that div doesn't exist.

With that being said, I'm trying to hide the first instance of a div with a specific class. I can only get it to work when the "logged in" div isn't there. When it is there, my code won't work.

Here's my setup:

<div class="my-dashboard">
  <div class="logged-in">You've been logged in (this only appears sometimes)</div>
  <div class="someClass">I want to hide this always</div>
    <div class="container">
      <div class="someClass">Never want to hide this</div>
      <div class="someClass">Never want to hide this</div>
      <div class="someClass">Never want to hide this</div>
    </div>
</div>

I've been trying to do:

.my-dashboard > .someClass:first-of-type{
  display: none;
}

This works when the .logged-in class isn't there. When the .logged-in class is there, it doesn't work.

If I just do this:

.my-dashboard .someClass:first-of-type{
  display: none;
}

Then it hides the one I need, but it also hides the first .someClass within .container.

Lastly, I can't simply do the following in addition to my original code:

.container .someClass{
  display: block;
}

Because I'm hiding some of those .someClass already for other purposes.

Obviously this setup isn't ideal, but I don't have the ability to apply unique classes to any of this.

mickdeez
  • 507
  • 3
  • 7
  • 16

1 Answers1

0

have you tried to specify the display: none for all the .my-dashboard > .someClass elements and then use the display: block (or the display level you want) for all the someClass elements except the first with:

.my-dashboard > .someClass ~ .someClass

like exposed here: CSS selector for first element with class ?

AlSteve
  • 65
  • 1
  • 9