target css of parent div

Question

Say I have the following mark up

<div class="xxx yyy zzz"> <!-- This div is generated by JS and the class names change all the time -->
   <div class="aaa"> Hello </div>
</div>

How can I target the css of the parent div without knowing the class name of the parent div using CSS only ?

Ex: parent.aaa { background: #fff; }

You can't, CSS has no parent-selector. With JavaScript yes, CSS no. And despite what you may read elsewhere [CSS 4 does *not* offer this](http://dev.w3.org/csswg/selectors4/#profiles) (as currently written, at least). — David says reinstate Monica, Aug 09 '13 at 20:35
As people told, no CSS parent selector. For JS (jQuery for e.g.), you could create `.aaa-parent { background: #fff; }` on CSS and then on jQuery `$('.aaa').parent().addClass('aaa-parent');` — RaphaelDDL, Aug 09 '13 at 20:37
http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector/1014958#1014958 — Muhammad Umer, Aug 09 '13 at 20:45

score 1 · Answer 1 · answered Aug 09 '13 at 20:38

1

It's not possible to target a parent of an element with CSS. Would be nice!

You could use javascript to find the element and then add a class to the parent, then style that added class:

// javascript - jquery
$(".aaa").parent().addClass("parentClass");

// css
.parentClass {
    ... your styles ...
}

answered Aug 09 '13 at 20:38

Tim Kindberg

Your [tag:javascript] is [tag:jquery]. – David says reinstate Monica Aug 09 '13 at 20:38
Right, forgot how (justifiably) anal devs were before I typed it out. I edited to specify that it was jquery. – Tim Kindberg Aug 09 '13 at 20:40

score 0 · Answer 2 · answered Aug 09 '13 at 20:39

0

In CSS there are no parent selectors, but you can use Javascript

element.parentNode

answered Aug 09 '13 at 20:39

2 Answers2