How to target parent attributes of any child selector using css

Question

how to target the parent div using the child class name?

example:

<div>
<span class="child">
</span>
</div>

Answer 1

There's not css selector for parent... in actual specifications ( v2 and v3 ) unfortunaly ^^
However, in future this will be possible, as the new Css4 specifications will provide some ways to do it... but no browsers actually implement them ;)

http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector

Answer 2

@Tahir wrote: << this is the case i am trying to resolve this list is randomly generated by a drupal module. >>

You can try this:
Explore the parent source code generated ( the html part containing the random list ), and find the first parent with an id ( or a class, but with a class you risk to not select the expected one if the structure is reused in same page/code ^^ ).
If you doesn't find one, you have to build a selector only with tag name: be carefull to be enough accurate to be sure that it select an unique elemenr...
If you find one, your work for build the selector path is easier, limited to the id element as root:

<div id="content">

<div>
<span class="child">
</span>
</div>

<div>
<span class="child2">
</span>
</div>

<div>
<span class="child3">
</span>
</div>

</div>

#content div:first-child { /* select the .child parent */
#content div:nth-child(2) { /* select the .child parent */
#content div:last-child { /* select the .child3 parent */

Obviously ( and unfortunaly :P ), you must probably write more complex selector, and multiply the rules for the differents elements sharing the same class... what is maybe incompatible with the random list ( it depends of how the html structure is impacted by randomness -- if just the content is randomized, it wouldn't be too much difficult ^^ )...

Answer 3

Best thing is to just throw a class on it...if you can't, try to target it as a child of a class or id that it is in/you are able to target.

Answer 4

You addEventListener callback for each classes and
set parent element by this.parentElement.style....

Answer 5

<div>
<span class="child">
</span>
</div>

<div>
<span class="child2">
</span>
</div>

<div>
<span class="child3">
</span>
</div>

this is the case i am trying to resolve this list is randomly generated by a drupal module.