CSS Selectors - Unset content if followed by class

Question

I currently try to unset a ::before content inside a css class if the following element is a image or got a specific class name.

Structure

The first element i got is a a:href with no specific id (i can't set one). This element creates a further pseudo element with ::before (a icon).

The second element is a image class inside the a:href

Example:

    <a href="https://example.org/assets/uploads/2015/02/A-Upload.jpg">
<img class="alignright wp-image-8184 size-medium" width="300" height="188" sizes="(max-width: 300px) 100vw, 300px" srcset="https://example.org/assets/uploads/2015/02/A-Upload-300x188.jpg 300w, https://example.org/assets/uploads/2015/02/A-Upload-1600x1000.jpg 1600w" alt="test" src="https://example.org/assets/uploads/2015/02/xA-Upload-300x188.jpg.pagespeed.ic.H4F1dyfjOe.jpg">
</a>

I would like to use a css selector and remove the ::before content from the a if the second element is a image or got a specific css class.

I tried now several ways like

#main-content .content .post-inner .entry p a::before ~ img.alignright{
 content: unset!important;
}

without success. I hope someone is able to tell me what i could have been done wrong.

Answer 1

There is currently no way to style a parent element based on a child element in CSS alone. What you are trying to do is simply not possible (in CSS3).

You need to either add a class to the a (or another parent node) and use that as your reference, or resort to JavaScript to update the styles of the parent based on the child img.alignright.

There is a :has() selector that has been proposed, but I don't think any browsers support it at this time. The syntax would be something like:

a:has(> img.alignright):before {
  content: unset;
}

But, again, this is just in a draft of CSS 4 which is still a ways out, I'm sure.