0

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.

yunzen
  • 30,001
  • 10
  • 64
  • 93
OHHH
  • 859
  • 3
  • 11
  • 31
  • 1
    no space --> `not(img):after` and there is no such selector actually (https://stackoverflow.com/q/1014861/8620333) – Temani Afif Jun 03 '19 at 16:08
  • This is not a duplicate, I am not trying to select the parent, I am trying to select the pseudo elements of the children of a tag – OHHH Jun 03 '19 at 16:22
  • is this what you want; https://jsfiddle.net/hfc61L09/ ? if so, I will edit the duplicate – Temani Afif Jun 03 '19 at 18:33
  • 2
    https://jsfiddle.net/cq531rb8/ I think you're missing a `display: block;` in your `::after` pseudo element – elveti Jun 04 '19 at 07:47

0 Answers0