CODEWITHSUNDEEP
csscss-selectorstarget
HaReL
HaReL

Reputation: 346

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!

Upvotes: -1

Views: 5572

Answers (3)

spiegelm
spiegelm

Reputation: 67

I know this question is old but since I still found it in 2024, here's an update:

The :has() pseudo-selector class can be used to access its parent elements.

div.with-link:has(> a:target) {
    background: yellow
}

Note that this method requires you to define a parent selector div.with-link in this case. All elements matching this selector that have the target in them will be highlighted.

All major browsers support this selector. Refer to https://caniuse.com/css-has to check if your target browser or browser versions have support for it.

If this does not fit your requirements, you may still fall back to the JavaScript alternative.

Source: https://stackoverflow.com/a/1014958/1457596

Upvotes: 0

Gaurav
Gaurav

Reputation: 12796

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

Upvotes: 1

PeeHaa
PeeHaa

Reputation: 72682

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.

Upvotes: 1

Related Questions