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

user20918430
June 6, 2023
232 views
1 vote
2 Answers

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

Parent of .apply-style-here should be a plain div or without the .second-stage class
.apply-style-here parent’s parent should not have a .second-stage
Thank you

<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>

Tried solution

/* 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;
}

Tags: css html

Answers

Judging by your description, this following selector could 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>

as commented , selector :has() is not yet supported everywhere . https://caniuse.com/css-has

Aside, some your :not() selector rules could be rewritten via the [class="xclass"] instead '.xclass'

your style sheet could be rewrite :

/* extra gaps for demo */
div{margin:0.15em;border:solid;}

/* Result: Put border to all parent of apply-style-here class*/
.first-stage:has(.apply-style-here) div:not([class]) {
  border: 1px solid gold;
} 

/* Result: No styles applied at all */
.first-stage > :not([class="second-stage"]) div {
  border: 1px solid red;
}

/* Result: No styles applied at all */
.first-stage:has(div:not([class="second-stage"]) > .apply-style-here) > div {
    border: 1px solid purple;
}

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

.first-stage:has(div:not([class="second-stage"] > .apply-style-here)) > div {
    border: 1px solid green;
}

@supports not selector( div:has(div)) {
body::before {content:'Selector :has()DA Not Supported in your browser,DA use another browser for testing.';display:block;text-align:center;background:yellow;padding:0.25em;color:crimson;font-size:2em;white-space:pre;}
}

<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>

online demo you can fork and edit https://codepen.io/gc-nomade/pen/QWJWbpG

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers