0

With CSS is it possible to target the first child that hasn't got a class

<div class="parent">
  <p class="hidden">Paragraph 1</p>
  <p class="hidden">Paragraph 2</p>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
</div>

So something like this ...

.parent p:not(.hidden):first-child {
  color:#ff0000
 }

The desired effect would be that paragraph 3 would now be red

Neil Kelsey
  • 811
  • 4
  • 13
  • 31
  • `.hidden + p {}` ? – Temani Afif Mar 06 '19 at 13:54
  • @TemaniAfif I'm assuming OP doesn't necessarily know the exact HTML, and would like a selector that would select the first `p` without a class. Additionally, your code selects paragraph 2 and 3. – kzhao14 Mar 06 '19 at 14:01
  • @k97513 - Correct on both accounts – Neil Kelsey Mar 06 '19 at 14:07
  • in this case, the answer is withinh the duplicate (the second duplicate do the opposite but the logic is the same) – Temani Afif Mar 06 '19 at 14:12
  • @TemaniAfif - there is nothing in that question that achieves my goal - this is not a duplicated question ... you cannot use 'first-of-type' as suggested in that question to achieve my goal by reversing the logic as you suggest – Neil Kelsey Mar 06 '19 at 14:24
  • the duplicate question will not show you how to achieve your goal it will give the details about how those selector works so you understand them and you think about another way to do .. I have added another duplicate explaining the same – Temani Afif Mar 06 '19 at 14:28

0 Answers0