CSS Targeting With Grandparents

Question

In this JSFiddle example, using CSS only, can the .child element be targeted/styled when the .secondChild element gets the attribute focused="true"? Something like:

.grandParent [focused="true"] ...?

Here's my HTML:

<div class="grandParent">
    <div class="parent">
        <div class="child"></div>
    </div>
    <div class="parent sibling">
        <textarea class="secondChild"></textarea>
    </div>
</div>

And my current CSS:

.grandParent {
    padding: 20px;
    background: red;
}
.parent {
    padding: 20px;
    background: blue
}
.child {
    padding: 20px;
    background: green;
}
.secondChild {
    padding: 20px;
    background: grey;
}
.sibling {
    padding: 20px;
    background: orange;
}

http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Lord Midi, Aug 20 '13 at 21:37
There is no way to do that currently. You'll have to use either JS or change the way your `div`s are laid out. You could place `
` immediately after the `textarea` and do `.secondChild:focus + .child {}` to achieve something similar. — ninty9notout, Aug 20 '13 at 21:39
Thanks guys for the quick answers. I punted to a JS getElementById solution. — D4A60N, Aug 21 '13 at 21:11

score 1 · Accepted Answer · answered Aug 20 '13 at 22:31

1

Maybe You can try something like this: http://jsfiddle.net/JTUKC/1/

Sincerely i don't know why these selectors don't work

div.grandParent div.parent textarea.secondChild:hover + div.grandParent div.parent div.child {
    background: pink !important;
}

answered Aug 20 '13 at 22:31

daniel__

11,633
15
64
91

@DRAGON, you can use :focus instead hover. – daniel__ Aug 21 '13 at 21:26

CSS Targeting With Grandparents

1 Answers1