0

Let's say that i have this HTML file:

<div> class="parent-x">_</div>
<div> class="parent-x">_</div>
<div> class="parent-x">_</div>
<div> class="parent-x">
    <div> class="some-child"> A child </div>
</div>

I want to style "parent-x" who is the direct parent to class "some-child". (without using Has since it's not supported in all browsers)

what i have tried is:

.parent-x > .some-child {  
    display: flex;
    align-items: center;  
}

but this styles the child itself not the parent.

I tried using "!" to select which class to be styled:

 .parent-x! > .some-child {  
         display: flex;
         align-items: center;  
     }

But I guess it is not supported anymore

Also I tried:

.some-child < .parent {  
             display: flex;
             align-items: center;  
         }

But it gives me syntax error in my editor.

Abdel-Rahman
  • 539
  • 5
  • 19
  • you would have to use :has(). `.parent-x:has(> .some-child)` – epascarello Sep 27 '22 at 17:31
  • Also, please note that your markup is severely malformed, which is going to give you lots of problems. – Alexander Nied Sep 27 '22 at 17:33
  • 2
    By pure CSS you cannot go up on the tree, so you cannot access the parent. – Azu Sep 27 '22 at 17:34
  • @AlexanderNied it's not really my code, it is a technical debt. But do you have any good suggestions about it? – Abdel-Rahman Sep 27 '22 at 17:43
  • @epascarello isn't there another way other than using has? – Abdel-Rahman Sep 27 '22 at 17:44
  • @epascarello my question says "Without using has" so it is not really a duplicate. – Abdel-Rahman Sep 27 '22 at 17:47
  • It's a dupe. Every possible answer is there. – j08691 Sep 27 '22 at 17:49
  • As the dupe states, [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) _is the_ "parent selector" that front end developers were wishing for for years; if you want a CSS-only solution that is your best (and pretty much only) bet. If you can manually add a class to parents that contain the specific children, or use JavaScript, then you have some other options. – Alexander Nied Sep 27 '22 at 18:11
  • 2
    `parent-x! > .some-child` was never supported. It's just an early proposal of what later became `:has()` – Alohci Sep 27 '22 at 18:15
  • 2
    There is no way to go up other than has(). If you can't use has, then you need to use JavaScript. – epascarello Sep 27 '22 at 18:18

0 Answers0