27

Possible Duplicate:
Is there a CSS parent selector?

I know this is a shot in the dark, but is there a way, using css only, CSS2, no jquery, no javascript, to select and style an element's ancestor? I've gone through the selectors but am posting this in case I missed something or there is a clever workaround.

For example, say I have a table with classname "test" nested inside a div. Is there some sort of:

<div>
    <table class="test">
    </table>
</div>

div (with child) .test
{
     /*styling, for div, not .test ...*/
}
Improve this question
1
  • Is there some problem with adding a class to the containing div? Commented Jul 1, 2010 at 23:07

4 Answers 4

Reset to default
16

You can use has():

div:has(> .test) {
   /*styling, for div, not .test ...*/
}

In CSS there is an :empty selector that allows you to match empty elements, you can negate the effect with :not selector.

div:not(:empty) {
    // your styles here
}

However I'm not sure if all browsers support this.

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

1 Comment

I don't understand how the selected answer is selected this works today, in 2023 when the svg:first-of-type + div.MuiBox-root selctor, that should have worked, did not.
11

There is no such thing as parent selector in CSS2 or CSS3. And there may never be, actually, because the whole "Cascading" part of CSS is not going to be pretty to deal with once you start doing parent selectors.

That's what jQuery is for :-)

Improve this answer

5 Comments

jQuery and JavaScript in general is for adding user interface functionality; not for specifying any style. jQuery and JavaScript are used for style due to the shortcomings of CSS, but are not meant for this purpose.
First of all, there is a smiley after that sentence. Secondly, I disagree. Would it be better to be able to specify all the presentation aspects via CSS? Of course. Is it possible? No. jQuery is a brilliant tool that lets you enrich user's experience - and if that includes setting a style that is otherwise impossible to set in a consistent way, then that's exactly what I'm going to do.
-1 for jQuery where OP simply could resort to vanilla JS.
The OP asks for a CSS solution.
This comment WAS correct when posted, more than 15 years ago. Today, it is easily done in plain CSS supported by all browsers, as shown in other answers.
3 
div:not(:empty) {
    margin:0;
}

is NOT recognized by http://jigsaw.w3.org/css-validator/ as CSS2

it's the purpose of CSS to "cascade" down from the more containing to the more specific elements. I guess it's possible for you to "reverse your logic", like in

div.myclass   { /* format parent */ }
div.myclass * { /* neutralize formats in descendants */}
div.myclass img { /* more specific formats for img children */ }

good luck Mike

Improve this answer

1 Comment

That can't vary the format the parent depending on what descedendents it has, which is what the OP was asking.
2

:empty pseudoclass supported by Firefox, but is not compatible with IE.

But a very simple jQuery workaround for IE is at http://www.webmasterworld.com/css/3944510.htm . Saved my bacon

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.