Can Sibling Combinators Target Pseudo-elements in CSS?

Sibling Combinators and Pseudo-Elements: Targeting Limitations

Can pseudo-elements be targeted using sibling combinators? A recent CSS issue has sparked this question.

In this scenario, an anchor tag with a preceding image should not display a pseudo-element. Targeting the anchor directly is not feasible due to the presence of the image. Therefore, an alternative approach using a sibling combinator on the pseudo-element was attempted, as shown below:

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

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

However, the CSS fails to hide the pseudo-element when the anchor tag encloses an image. Why is this so?

The limitation lies in the nature of pseudo-elements. Generated content, including pseudo-elements, is not included in the DOM and doesn't affect the original document. This is explicitly stated in the CSS specification:

"Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing)."

Consequently, the sibling combinator cannot target a :before or :after pseudo-element since they are not part of the DOM structure.

For similar scenarios, consider using JavaScript to manipulate the DOM dynamically and achieve the desired styling effects.

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