apply CSS style to element containing certain elements?

Question

I found there is no official parent selector, but there are pseudo-classes like :has, so I was wondering how one would go about applying CSS to the following kind of paragraph:

<p><em><a href="#_ftnref11" name="_ftn11">[11]</a>&nbsp;Source Text</em></p>

I'd need to apply CSS to this type of paragraph, which is one in a list of several, and the only thing they have in common (besides the structure) is the '_ftn' part of the name attribute. Unfortunately, these paragraphs are also not wrapped in another element I could build the CSS on - that's how it comes out of a plugin...

Thanks for any inputs from you CSS gurus!

Answer 1

The :has() CSS selector is currently not supported by any browser (reference).

However, if you want to target anchor elements which are placed within a p > em tag, you can do something like this:

Note the attribute selector [name^="_ftn"] on the a element.

p em a[name^="_ftn"] {
  color: green;
  font-size: 18px;
  text-decoration: none;
  font-weight: 700;
}

<p><em><a href="#_ftnref11" name="_ftn11">[11]</a>&nbsp;Source Text</em></p>