Attribute Selectors

Presence and Value Selectors

These help select based on whether or not there is an attribute present. The following all select exact match plus other stuff.Using the attribute "class" as an example:

• Item 1 (no attribute)
• Item 2 (class="a")
• Item 3 (class="a b")
• Item 4 (class="ab")
• Item 5 (class="a-b)"

with the following CSS:

    li[class] {
    font-size: 120%;
    }

    li[class="a"] {
    background-color: yellow;
    }

    li[class~="a"] {
    color: red;
    }

    li[class|="a"] {
    font-style: italic;
    }

• So Item 1 is not selected.
• li[class] selects any li with the class attribute, regardless of what the class actually is
• li[class="a"] selects any li whose class attribute is set to exactly "a" with no additional clases like item 3 has.
• li[class~="a"] just like the previous with exact match only it will also select any that have that class in a space-separated list. So this selects both 2 and 3.
• li[class|="a"] selects exact match of "a" but also selects anything with "a-" where there can be other stuff after the hyphen.

Substring matching selectors

• Item 1 (class="c")
• Item 2 class="cd"
• Item 3 class="dac"
• Item 4 class="dcabc"

    li[class^="c"] {
    font-size: 150%;
    }

    li[class$="c"] {
    background-color: yellow;
    }

    li[class*="c"] {
    color: red;
    }

• li[class^="c"] selected if class begins with "c" (1 and 2 selected)
• li[class$="c"] selected if class ends with "c" (1 and 3 selected)
• li[class*="c"] selected if class has c anywhere (all are selected.