I currently have a few <a>
tags, and I want to append an icon to a few of them. I want to exclude all the tags which have an <img>
child.
I can select all the right tags using the following selector:
a[href^='google'] > :not(img) {
background: yellow;
}
Unfortunately, when I combine it with the ::after pseudo selector, I do not get anything:
a[href^='google'] > :not(img)::after {
content: '';
width: 50px;
height: 50px;
background: orange;
}
Here is a fiddle with a playground
a[href^='google']> :not(img) {
background: yellow;
}
a[href^='google']> :not(img)::after {
content: '';
width: 50px;
height: 50px;
background: orange;
}
<a href="google.com">
<img src="https://s3.amazonaws.com/images.seroundtable.com/google-submit-url-1516800645.jpg" />
</a>
<a href="google.com">
<p> There should be an orange square after this link while the link with the image should have no orange square </p>
</a>
How can I select all the pseudo afters for the children that match the given regex?
NOTE: This is not asking to select the parent of a child, but to select the children of a parent.