Can I target: before or: after a pseudo-element using a combination of siblings?

Question

Is there a reason why this CSS is not working?

http://jsfiddle.net/6v5BZ/

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

.. on this HTML?

 <a href="http://google.com">Test</a> <a href="http://google.com"> <img src="https://www.google.com/logos/classicplus.png"> </a> 

The idea is to have a pseudo-element when matching anchor tags. But I don’t want it to apply to anchor tags that wrap the image. And since I cannot customize the anchor binding using something like a < img , I thought that maybe I could target: after the pseudo-element, finding the image that it is native to.

Any understanding would be greatly appreciated.

Answer 1

You cannot target: after the content is not displayed in the DOM and it does not manipulate it, you need to redraw the DOM to do this, and CSS cannot manipulate it that way.

Check the specification for a detailed understanding: http://www.w3.org/TR/CSS2/generate.html#propdef-content

Generated content does not change the document tree. In particular, this does not return back to the document language processor (for example, for reprocessing).

I suggest you use JavaScript to do the job.

Answer 2

You cannot use a combinator to target a pseudo-element with respect to elements other than its generating element.

This is because they are pseudo-elements, not real elements, and combinators only work by establishing relationships between actual elements. On the other hand, a pseudo-element can only be applied to the subject of the selector (the rightmost compound selector), and this only happens after the comparison is processed on real elements. In other words, matching is done first, as if the pseudo-element were not there, then the pseudo-element, if specified in the selector, is applied to each match.

In your code, the following selector:

 a[href^="http"] img ~ :after 

Not really looking for the :after pseudo-element that comes after img inside a , although it looks like this, since both of them appear as children of a .

It can be rewritten as follows:

 a[href^="http"] img ~ *:after 

Note the selector * , which is implied. Just as you can omit * in front of any other simple selectors so that it is implied, excluding * from a pseudo-element also implies that it exists. See spec for more details.

Now, even if it appears, *:after should still match a:after (since a matches * ), it still doesn't work. If you remove the :after pseudo-element from the selector:

 a[href^="http"] img ~ * 

You will notice that the selector value changes completely:

Select any item.
which appears as the next brother from img
that is, a descendant of a (whose href begins with "http").

Since img is the last child of the a element in your HTML, the following siblings do not exist for matching, and therefore, pseudo-elements cannot be generated :after .

In the case of the :before or :after pseudo-element, you might think about the coincidence of the pseudo-element generation element with respect to the pseudo-element "sibling", but, as the OP correctly pointed out, there is no parent selector , so they are also out of luck.