Leveraging the power of CSS Target to emphasize the parent container

Question

Leveraging the power of CSS Target to emphasize the parent container

I utilize Ckeditor on my website for adding articles. These articles are typically sourced from Word documents and contain footnotes. In the latest Ckeditor build (7125), I've managed to link each article to its respective footnote using automatic anchors. Here is the link to the initial footnote (which refers 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 highlighted...
</div>

Each footnote is enclosed within a div element as shown. By applying the following CSS, I was able to highlight the <a>:

a:target { background:yellow; }

My query is: How can I emphasize the entire <div> that houses the child <a>? (Using 'ftn1' as an example.)

Thank you!

css css-selectors target

Answer 1

Answer №1

Regrettably, CSS does not have any parent or ancestor selector types due to the negative impact they can have on browser performance. Fortunately, you can accomplish your desired outcome effortlessly using JQuery:

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

Answer 2

Regrettably, CSS does not have any parent or ancestor selector types due to the negative impact they can have on browser performance. Fortunately, you can accomplish your desired outcome effortlessly using JQuery:

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

Answer 3

Answer №2

Regrettably, the outcome you seek is unattainable.

If the CSS code were required to search through the children of an element and then backtrack up the DOM, it would significantly reduce performance.

Hence, the absence of an Ancestor Selector in CSS.

You might consider having control over the parent and assigning a specific class (such as "footnote") to it.

Alternatively, utilizing JavaScript could help achieve your desired result.

Answer 4

Regrettably, the outcome you seek is unattainable.

If the CSS code were required to search through the children of an element and then backtrack up the DOM, it would significantly reduce performance.

Hence, the absence of an Ancestor Selector in CSS.

You might consider having control over the parent and assigning a specific class (such as "footnote") to it.

Alternatively, utilizing JavaScript could help achieve your desired result.

Answer 5

Answer №3

Although this question may be old, I stumbled upon it in 2024 and thought I'd provide an update:

You can utilize the :has() pseudo-selector class to target parent elements.

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

Keep in mind that you'll need to specify a parent selector like div.with-link when using this method. Any elements that match this selector and contain the target will be highlighted.

This selector is supported by all major browsers. Check https://caniuse.com/css-has to confirm its support in your browser or specific versions.

If this approach doesn't meet your needs, you can always resort to the JavaScript alternative.

Source:

Answer 6

Although this question may be old, I stumbled upon it in 2024 and thought I'd provide an update:

You can utilize the :has() pseudo-selector class to target parent elements.

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

Keep in mind that you'll need to specify a parent selector like div.with-link when using this method. Any elements that match this selector and contain the target will be highlighted.

This selector is supported by all major browsers. Check https://caniuse.com/css-has to confirm its support in your browser or specific versions.

If this approach doesn't meet your needs, you can always resort to the JavaScript alternative.

Source:

Leveraging the power of CSS Target to emphasize the parent container

Answer №1

Answer №2

Answer №3

Similar questions

Using a CSS gradient with a variable in React.js - A guide to implementation

Bootstrap columns are still disrupted by large images even when they have reached their maximum width and height

Revolutionary CSS and jQuery for an Exceptional Top Navigation Experience

Is there a way to rearrange the tabs so that the first tab is at

Switch up the CSS variable within an embedded iframe

Creating a unique icon using Jquery Mobile for a button in a PhoneGap application

Utilizing media queries and JQuery to display a variety of menus based on screen

Trigger the callback function once the datatables DOM element has finished loading entirely

Referencing another component in StyledComponents

Tips on pausing a moving image from left to right and restarting it later

Guide on making an SVG tooltip using the Menucool JS extension

Modify the color of a set of div elements when clicked

The hyperlink for social media is not functioning properly within a list element

Troubleshooting the Problem with CSS Margin in HTML Footer

Can a div with float: left; be centered?

Fade-In Effect for CSS Background Image

Transition of positions animation

How come the cubic bezier timing function works flawlessly just on the first try when staggered transitioning element opacity over time with CSS and a touch of JS?

Is there a way to showcase a row of images when a button is clicked?

How can one get rid of a sudden strong beginning?