Use pseudo-class :contains-element(
where element_name
, ..., element_name
)element_name
, a CSS identifier, string or qualified name, specifies the name of child element.
Several child element names may be specified, in which case, the :contains-element()
test will pass if the subject of the test directly contains a child element having any of the specified names.
Note that:
p:contains-element(i) { color: red; }
is very different from:
p > i { color: red; }
In the first case, the subject of the CSS rule, that is the element which is styled, is p
. In the second case, it is i
.
Examples:
/* No namespace declaration before this. */ p:contains-element(i) { color: red; } p:contains-element(|b) { color: green; } @namespace foo "http://foo.com"; p:contains-element(foo|hl) { color: blue; } @namespace "http://bar.com"; p:contains-element(hl) { color: yellow; } *|*:contains-element(*|hl) { text-decoration: underline; } *|hl { display: inline; }
Element with local name | |
Element with local name | |
Element with local name | |
Element | |
Any element having a child with local name |