CSS selector based on: target

Question

This is my HTML:

<p class="define"><a class="term" href="#jump" name="jump">jump</a> - Some description</p> 

When the browser goes to #jump , I want to highlight the .define class. If yes,

 a.term:target { background-color: #ffa; -webkit-transition: all 1s linear; } 

Of course, I highlight only a . How to change this to complete p ? I tried several options as shown below, but none of them work.

a.term:target .define { stuff here }

a.term:target p.define { stuff here }

a.term:target p { stuff here }

jsFiddle: http://jsfiddle.net/vVPPy/

Answer 1

You cannot change the parent with css. You will have to use the javascript alternative.

Answer 2

You cannot determine where the user is on the page using CSS. This can be done using JavaScript. If you are not trying to invent a wheel, I would recommend using Bootstrap ScrollSpy .

Answer 3

Your <p> not an object of anything. If it were:

 <p class="define" id="something"> <a class="term" href="#something" name="jump">jump</a> - blah </p> 

You can create it like this:

 a.term:target { background-color: #ffa; } 

but this has nothing to do with pressing <a> . To do this, you need to use the onclick handler, which will ideally add a class to the target and style based on this class.