0

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!

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
HaReL
  • 348
  • 5
  • 12
  • not possible with pure css. See http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – Gabriele Petrioli Jul 19 '11 at 22:13
  • What you are looking for is parent selector which is not part of css. Checks this article to learn why http://snook.ca/archives/html_and_css/css-parent-selectors – Sotiris Jul 19 '11 at 22:23

2 Answers2

2

What you want is not possible.

Because if the code for CSS had to check the children of an element and after that has to go back up in the DOM it would get really slow.

So there is no Ancestor Selector in CSS.

Perhaps you have control over the parent and can add a class (e.g. footnote) to it.

Or you can use JavaScript to do what you want.

PeeHaa
  • 71,436
  • 58
  • 190
  • 262
2

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");
Gaurav
  • 12,662
  • 2
  • 36
  • 34
  • You want `.parent()` rather than `:parent`. – BoltClock Jul 19 '11 at 22:39
  • Thanks, but I'm not sure how am I supposed to use it. I've tried to add in the `` this code: `$(document).ready(function() { $("a").click(function() { $("a:target").parent().css("background", "yellow"); }); });` But it have alot of problems... I don't know so well JQuery. The first time I click a link - it's not changing it's color. Only on the second click. And when you click another link - the previous stay yellow... – HaReL Jul 20 '11 at 11:10
  • Thank you! Why the timer is needed? – HaReL Jul 20 '11 at 16:57