How to target parent attributes of any child selector using css | Sololearn: Learn to code for FREE!
+ 2

How to target parent attributes of any child selector using css

how to target the parent div using the child class name? example: <div> <span class="child"> </span> </div>

8th May 2017, 7:47 PM
Tahir
Tahir - avatar
5 Answers
+ 5
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
9th May 2017, 5:42 AM
visph
visph - avatar
+ 4
@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 ^^ )...
9th May 2017, 5:41 PM
visph
visph - avatar
+ 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.
8th May 2017, 8:19 PM
Damien Lucchese
Damien Lucchese - avatar
+ 2
You addEventListener callback for each classes and set parent element by this.parentElement.style....
9th May 2017, 12:34 AM
Calviղ
Calviղ - avatar
+ 1
<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.
8th May 2017, 8:31 PM
Tahir
Tahir - avatar