CODEWITHSUNDEEP
css
Sadegh
Sadegh

Reputation: 4341

How can I set a parent element’s style based on its child’s attributes in CSS?

For example when input is disabled, parent element should have Black background otherwise White.

<div><input type="text" disabled="disabled" /></div>

div input[type="text", disabled="disabled"] {
    background: Black;
}

I want to style parent element instead of child.

Upvotes: 3

Views: 5549

Answers (3)

Hasan ABLAK
Hasan ABLAK

Reputation: 101

You can select this elements parent with css has selector;

For Example;

Lats say we have an div and div have inside to input element;

.hasan-ablak {
            padding: 5px;
            background-color: green;
        }

.hasan-ablak:has(input:disabled) {
  background-color: orange;
}
.hasan-ablak:has(input:disabled) {
            background-color: red;
        }
<div class="hasan-ablak">
            <input type="text">
</div>
    
<div class="hasan-ablak">
  <input type="text" disabled>
</div>

Upvotes: 4

Jamie Dixon
Jamie Dixon

Reputation: 54001

There is currently no parent selector in CSS as of the latest version.

Upvotes: 2

PeeHaa
PeeHaa

Reputation: 72672

Not possible using CSS.

It is possible with JavaScript though.

Upvotes: 3

Related Questions