CSS - design parent class if child has a specific class [duplicate]

Question

Possible Duplicate:
Complex CSS selector for parent of active child
Is there a CSS parent selector?

Is there a way to design parent class based on if its child elements has a specific class?

<div class="container">
   <div class="content1">
      text
   </div>
</div>

.

<div class="container">
   <div class="content2">
      text
   </div>
</div>

I want to design the first .container differently based on if the child class is content1 or content2. It must be pure css solution, without javascript.

tuff · Accepted Answer · 2022-12-08 16:56:10Z

11

2012 answer:

No, you can't do that. CSS can't select elements based on their children, except to check whether or not the element is empty.

2022 answer: the :has() selector, see https://developer.mozilla.org/en-US/docs/Web/CSS/:has

e.g. .container:has(> .content1) will select elements classed as .container which are the direct parent of an element classed as .content1.

edited Dec 8, 2022 at 16:56

answered Oct 16, 2012 at 18:58

tuff

5,1936 gold badges31 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sylv Over a year ago

Unfortunately, this isn't supported on Firefox yet.

user1726343 · Accepted Answer · 2012-10-16 18:59:02Z

5

What you're asking for is the the mythical CSS parent selector. Perhaps some day.

answered Oct 16, 2012 at 18:59

user1726343

1 Comment

Mikael Dúi Bolinder Over a year ago

10 years later it's here, has().

Kevin Boucher · Accepted Answer · 2012-10-16 19:00:26Z

5

Why not use container1 + content and container2 + content?

<div class="container1">
    <div class="content">
      text
    </div>
</div>

<div class="container2">
    <div class="content">
        text
    </div>
</div>

And then write CSS like so:

.container1 .content {
    /* Container 1 styles here */
}

.container2 .content {
    /* Container 2 styles here */
}

answered Oct 16, 2012 at 19:00

Kevin Boucher

16.8k3 gold badges51 silver badges57 bronze badges

2 Comments

user1726343 Over a year ago

Won't those apply the styles to the .content elements? Just to clarify, I thought his requirement was to apply styles to the container elements and not the children.

Kevin Boucher Over a year ago

@Asad: Yes, if there is other content outside of the .content div, but inside a .container div that needs to be styled, then the OP can simply write rules for .container1 and .container2

Collectives™ on Stack Overflow

CSS - design parent class if child has a specific class [duplicate]

3 Answers 3

1 Comment

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Linked

Related