csscss-selectorstarget

Using CSS Target to highlight parent div


I'm using Ckeditor in my site to insert articles. The articles usually come from a Word document, and they have footnotes. With the last Ckeditor build (7125) I've been able to link from the article to the right footnote with anchors. It's doing it automatically. This is the link to the first footnote (the footnote is pointing back to the source).

<a href="#_ftn1" name="_ftnref1" title="">[1]</a>

<!-- This is the footnote -->
<div id="ftn1">
  <a href="#_ftnref1" name="_ftn1" title="">[1]</a>
First footnote. I want this to be highlight...
</div>

As you can see, each footnote is inside a div. With the following CSS I succeeded to highlight the <a>:

a:target { background:yellow; }

My question is: How can I highlight the whole <div> that <a> is his child? ('ftn1', in the example.)

Thanks!


Solution

  • Unfortunately, there is no parent or ancestor types of selectors in CSS, for the reason that it is a major problem for browser performance. However, you can achieve what you want easily with JQuery:

    $("a:target").parent().css("background", "yellow");