4. Styling an element which contains a specific child element
Prev | Chapter 4. Other extensions | Next

## 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) {
        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 `p`, whatever is its namespace, containing a `i` whatever is its namespace, gets a red color.
| Element with local name `p`, whatever is its namespace, containing a `{}b`, gets a green color.
| Element with local name `p`, whatever is its namespace, containing a `{http://foo.com}hl`, gets a blue color.
| Element `{http://bar.com}p`, containing a `{http://bar.com}hl`, gets a yellow color.
| Any element having a child with local name `hl`, whatever is the namespace of this `hl`, is to be underlined.

Prev | Up | Next
3. Styling an element which contains a specific processing instruction | Home | 5. Specifying namespaces