4. Styling an element which contains a specific child element

Use pseudo-class :contains-element(element_name, ..., element_name) where 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) {1
    color: red;
}

p:contains-element(|b) {2
    color: green;
}

@namespace foo "http://foo.com";

p:contains-element(foo|hl) {3
    color: blue;
}

@namespace "http://bar.com";

p:contains-element(hl) {4
    color: yellow;
}

*|*:contains-element(*|hl) {5
    text-decoration: underline;
}

*|hl {
    display: inline;
}

1

Element with local name p, whatever is its namespace, containing a i whatever is its namespace, gets a red color.

2

Element with local name p, whatever is its namespace, containing a {}b, gets a green color.

3

Element with local name p, whatever is its namespace, containing a {http://foo.com}hl, gets a blue color.

4

Element {http://bar.com}p, containing a {http://bar.com}hl, gets a yellow color.

5

Any element having a child with local name hl, whatever is the namespace of this hl, is to be underlined.