Thursday, 29 December 2016

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



I'm trying to select elements that are not the parents of 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?


Answer



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.


No comments:

Post a Comment

c++ - Does curly brackets matter for empty constructor?

Those brackets declare an empty, inline constructor. In that case, with them, the constructor does exist, it merely does nothing more than t...