multi css selector but no when one is hidden

Question

lets have this selector

.A ~ .A .B{
  padding-top: 0;
}

I understand that this will put padding-top: 0 when at least two elements use class A together with B

now lets assume that there are indeed two elements but one has also display: none

<div class="A">
    <div class="B"><div> //do not apply this since second div with A is disabled
<div>
<div class="A" style="display:none"><div>

in this way how to modify this selector not be applicable since on UI it looks like there just one div.

Based on your description, it should be `.A ~ .A.B`. Also, is the element hidden via style attribute? — Salman A, Oct 15 '21 at 13:41
@SalmanA ok any way how to not apply this when the first div is hidden — kosnkov, Oct 15 '21 at 13:42
Duplicate of https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector — Salman A, Oct 15 '21 at 14:00

pavel · Answer 1 · 2021-10-15T13:42:50.007

2

No, selector .A ~ .A .B means

.A ~ .A .B {color: red;}

<div class="A">First element</div>
<div class="A">
    <div class="B">This element will be targeted</div>
</div>

Selector, you are looking for is

.A ~ .A.B {color: red}

<div class="A">First element</div>
<div class="A">
    <div class="B">This element will not be targeted</div>
</div>
<div class="A B">This element will be targeted</div>

Which means sibling of .A element and has classes at least class="A B".

edited Oct 15 '21 at 13:42

answered Oct 15 '21 at 13:40

pavel

26,538
10
45
61

ok so how to avoid applying it when first div has display: none ? – kosnkov Oct 15 '21 at 13:42
@kosnkov `:not([style])` attribute selector? – pavel Oct 15 '21 at 13:43
@pavel that was not his question. The edit invalidates your answer. – Salman A Oct 15 '21 at 13:50

multi css selector but no when one is hidden

1 Answers1