search

Home  >  Q&A  >  body text

Using only css, add the css style to the parent of .apply-style-here (without the .second-stage class)

How to apply styles to the parent div of .apply-style-here by only meeting this condition

  1. The parent of .apply-style-here should be a normal div or no .second-stage class
  2. .apply-style-here Parent's parent should not have .second-stage Thanks
<div class="first-stage">
    <div>
        <div class="apply-style-here">Content</div>
    </div>
</div>

<div class="first-stage">
    <div class="second-stage">
        <div>
            <div class="apply-style-here">Content</div>
        </div>
    </div>
    <div>
        <div class="apply-style-here">Content</div>
    </div>
</div>

Try solutions

/* Result: Put border to all parent of apply-style-here class */
.first-stage:has(div > .apply-style-here) > div {
/*  margin-top: 20px; */
  border: 1px solid red;
}

/* Result: No styles applied at all */
.first-stage:not('div > .second-stage') > div {
  border: 1px solid blue;
}

/* Result: No styles applied at all */
.first-stage:has(div:not('.second-stage') > .apply-style-here) > div {
    border: 1px solid blue;
}

/* Result: Applied to all .apply-style-here even second .second-stage is present */
.first-stage:has(div:not(.second-stage) > .apply-style-here) > div {
    border: 1px solid blue;
}
/* Result: Applied to all .apply-style-here even second .second-stage is present */

.first-stage:has(div:not(.second-stage > .apply-style-here)) > div {
    border: 1px solid blue;
}

P粉798010441P粉798010441557 days ago638

reply all(1)I'll reply

  • P粉814160988

    P粉8141609882023-09-12 00:17:50

    According to your description, the following selectors may work:

    :not(.second-stage) > :not(.second-stage) > .apply-style-here

    :not(.second-stage) > :not(.second-stage) > .apply-style-here {
      border: solid 1px blue;
    }
    <div class="first-stage">
        <div>
            <div class="apply-style-here">Content</div>
        </div>
    </div>
    
    <div class="first-stage">
        <div class="second-stage">
            <div>
                <div class="apply-style-here">Content</div>
            </div>
        </div>
        <div>
            <div class="apply-style-here">Content</div>
        </div>
    </div>

    reply
    0
  • Cancelreply