CODEWITHSUNDEEP
htmlcsscss-selectors
James Ko
James Ko

Reputation: 34489

Is it possible to select elements that do not have a child of a certain type?

I'm trying to select <a> elements that are not the parents of <img> elements. (Note: if it's relevant some of the anchors I want to select are childless.) I tried this:

a > :not(img) {}

and this:

a:not(> img) {}

but neither of them seem to work. How would I accomplish this in CSS?

Upvotes: 5

Views: 3610

Answers (2)

Hee Jin
Hee Jin

Reputation: 145

Unfortunately, no. You'd need to use jQuery.

You could do some kind of workaround using CSS:

  1. Assign a class to links that do not have child elements that are images and use that class to style the links as normal (e.g. a.class{color: red})

  2. Assign a class to links that do have an image child element, and use a:not(.class){} to change their color

Reason: There is no parent selector in CSS. See: Is there a CSS parent selector?, CSS Parent/Ancestor Selector

Upvotes: 1

Lanny Heidbreder
Lanny Heidbreder

Reputation: 1403

There is a spec, currently in draft, for a :has() pseudo-class. No browser supports it yet. If the spec is someday approved and implemented, you'd be able to do this:

a:not(:has(img)) {
    // Styles
}

The MDN page says that :has would never work in stylesheets, only in JavaScript; but in saying that, it links to a section of the spec about a "dynamic selector profile" that apparently no longer exists.

I think the browser vendors typically have a problem with implementing CSS features that require knowledge of the DOM that only exists after the selected element is created, so I don't know if we should get our hopes up for this. Someone who follows the mailing lists or is generally smarter than me might offer a better prognosis.

Upvotes: 7

Related Questions