Use pseudo-class :contains-element(element_name) where element_name, a CSS identifier, string or qualified name, specifies the name of child element.
Note that:
p:contains-element(i) {
color: red;
}is very different from:
p > i {
color: red;
}In the first case, the target 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;
}