Adequate CSS selector 1 nested element up

Question

Using CSS selectors, I would like to, on click of a link, put a box shadow around a div one element up.

    <!DOCTYPE html>
    <html>
        <body>
            <div class="container">
                <div id="selected_div">
                    <a><p id="click"></p></a>
                </div>
            </div>
        </body>
    </html>

I do not know which selectors to use. Please enlighten me.

possible duplicate of [Complex CSS selector for parent of active child](http://stackoverflow.com/questions/45004/complex-css-selector-for-parent-of-active-child) — raina77ow, Aug 18 '14 at 18:06
Also check http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector?rq=1 — raina77ow, Aug 18 '14 at 18:06
CSS won't (shouldn't, at least) detect the click of a link anyway; that would not be separating style from script — Ian, Aug 18 '14 at 18:13

score 2 · Accepted Answer · answered Aug 18 '14 at 18:11

Considering that you want to do an action based upon a click, it's better to use Javascript anyway. CSS has no parent selector and cannot detect a click. Here is the jQuery solution:

$("document").ready(function() {
  $("#selected_div a").click(function() {
    $(this).parent().css("box-shadow", "2px 2px 3px #fff");
  }
}

Remember to include the jQuery library.

score 1 · Answer 2 · answered Aug 18 '14 at 18:07

1

You can't style parent objects based on the state of their children (as of CSS3). This is doable with JS, but not with pure CSS.

answered Aug 18 '14 at 18:07

Alex Beals

1,365
3
14
24

score 0 · Answer 3 · answered Aug 18 '14 at 18:27

0

Using :target selector you can highlight the parent element. Have a look at DEMO.

CSS Use Here

:target
{
background-color: gold;
  box-shadow:2px 2px 3px #eee;
}

#selected_div
{
border:1px dashed #cecece;

}

HTML Code Used here.

 <div class="container">
 <div id="selected_div">
     <a href="#selected_div">
          <p id="click">Sample TEXT</p>
    </a>
  This content should be selected.

   </div>
</div>

answered Aug 18 '14 at 18:27

Kheema Pandey

9,189
4
22
24

great.. Now whats the problem with this approach. Downvoters always explain things why a negative marks for any answers. without any explanation this is not going to help anyone... – Kheema Pandey Aug 18 '14 at 18:32
whats wrong with the people here.. Here jquery answer should be acceptable while other non helping answer getting `+1` voting.. – Kheema Pandey Aug 18 '14 at 18:33

Adequate CSS selector 1 nested element up

3 Answers3