Can Sibling Combinators Target Pseudo-elements like :before or :after?

Sibling Combinators and Pseudo-Elements

In this CSS quandary, we encounter the question of whether it's possible to target a pseudo-element, specifically :before or :after, using a sibling combinator.

Consider the following CSS:

a[href^="http"]:after {
  content:"";
  width:10px;
  height:10px;
  display:inline-block;
  background-color:red;
}

a[href^="http"] img ~ :after {
  display:none;
}

And the subsequent HTML:

<a href="http://google.com">Test</a>
<a href="http://google.com">
  <img  src="/static/imghwm/default1.png" data-src="https://www.google.com/logos/classicplus.png" class="lazy" alt="Can Sibling Combinators Target Pseudo-elements like :before or :after?" >
</a>

The intention is to apply a pseudo-element to all matching anchor tags, except those that contain an image. However, the CSS fails to function as expected.

The answer lies in the nature of pseudo-elements. According to the CSS specification, generated content from pseudo-elements does not affect the DOM structure. This means that sibling combinators, which rely on elements being present in the DOM tree, cannot target pseudo-elements.

In other words, the CSS is attempting to hide the :after pseudo-element on anchor tags that share a parent with an image. However, since the :after pseudo-element is not rendered into the DOM, it is impossible for the sibling combinator to locate it.

As a result, JavaScript is often a more suitable solution for targeting elements based on their relationships with other elements in the DOM.

The above is the detailed content of Can Sibling Combinators Target Pseudo-elements like :before or :after?. For more information, please follow other related articles on the PHP Chinese website!