开发者

Using CSS Target to highlight parent div

开发者 https://www.devze.com 2023-03-22 00:50 出处:网络
I\'m us开发者_开发知识库ing Ckeditor in my site to insert articles. The articles usually come from a Word document, and they have footnotes.

I'm us开发者_开发知识库ing 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!


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");


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消