Attribute Selectors

See https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

by Shaun Luttin

HTML

<p my-attr>[attr] Represents an element with an attribute name of attr.</p>
<p my-attr="foo">[attr=value] Represents an element with an attribute name of attr and whose value is exactly "value".</p>
<p my-attr="one two three four five six">[attr~=value] Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value".</p>
<p my-attr="super-">[attr|=value] Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.</p>
<p my-attr="prefixSomeOther">[attr^=value] Represents an element with an attribute name of attr and whose value is prefixed by "value".</p>
<p my-attr="SomethingSuffix">[attr$=value] Represents an element with an attribute name of attr and whose value is suffixed by "value".</p>
<p my-attr="someLong-StringOccursLater-OnInHere">[attr*=value] Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring.</p>

CSS

[my-attr]
{
    text-decoration:underline;    
}
[my-attr="foo"]
{
    color:red;
}
[my-attr~="three"]
{
    color:orange;
    background:black;
}
[my-attr|="super"]
{
    color:yellow;
    background:black;
}
[my-attr^="prefix"]
{
    color:green;
    background:black;
}
[my-attr$="Suffix"]
{
    color:blue;
}
[my-attr*="Occurs"]
{
    color:pink;
    background:black;
}