Two routes children and conditional styling

Emiliorth 0
Viewed 22

I got this case:

<div class="parent">
    <div class"routeA">
        <div class="header">
            <li></li>
            <li class="p-highlight"></li>
            <li></li>
        </div>
    </div>
    <div class="routeB">
        <div class="content">
        </div>
    </div>
</div>

I need to make .content to have border-radius: 6px when .p-highlight is not with first li, and .content to have border-radius: 0px 0px 6px 6px when .p-highlight is combined with first li

Is this even possible?

sass css
1 Answers

Yes, it's possible with the following rule but you need to be aware that the :has() pseudo class is not fully supported by all browsers (e.g firefox, Opera, Chrome for Android etc) You can check compatibility at caniuse.com

Note: I've also added a border to .content so you can see the effect.

.content {
  border: 1px solid black;
  border-radius: 6px;
}

.parent:has(li:first-child.p-highlight) .content {
  border-radius: 0 0 6px 6px;
}
<div class="parent">
  <div class="routeA">
    <div class="header">
      <li class="p-highlight">One</li>
      <li>Two</li>
      <li>Three</li>
    </div>
  </div>
  <div class="routeB">
    <div class="content">
      Content
    </div>
  </div>
</div>

userurKQ0
Related