How can I set a class to the parent element if the child contains certain class?

Question

So I have this:

body {
   padding-left: 350px;
}

<body>
   <div>child</div>
</body>

Sometimes this child contains a variation:

<body>
   <div class="service-error">child</div>
</body>

So I want to do something like this:

.service-error {
  body & {
    padding-left: 0 !important;
  }
}

But it is not working, any ideas on what is the proper way?

score 0 · Answer 1 · answered Apr 15 '20 at 01:17

0

There isn't a way to target a parent element using css since they follow the cascading rule which is "top to bottom". I would suggest using javascript to select the parent and add a class.

answered Apr 15 '20 at 01:17

DpK

100
4

I am using scss/sass, is impossible with it too? – Reacting Apr 15 '20 at 01:19
Yes, not possible with scss/sass as well. It is simply a superset of css offering simpler and efficient ways to write css. Hope that answers your question. – DpK Apr 15 '20 at 01:29

score 0 · Answer 2 · answered Apr 15 '20 at 01:20

You cannot set styles for the parent tag, but since you have a specific class name, you can set when to enable padding-left style or not.

In this example, by default all of the divs inside the container element should have padding-left style with 350px. But when you add the class name service-error to specify it, it would be reset.

.container div {
  padding-left: 350px;
  border: 1px solid #ccc;
}

.service-error {
  padding-left: 0 !important;
}

<div class="container">
   <div>child</div>
</div>

<div class="container">
   <div class="service-error">child</div>
</div>

How can I set a class to the parent element if the child contains certain class?

2 Answers2