Attribute's
| Syntax |
Example |
Example Explained |
| [attr] |
a[title] |
Matches all <a> elements with a title attribute assigned. |
| [attr=value] |
th[class=column-thin] |
Matches all <th> elements with the class attribute having an exact value of "column-thin" |
| [attr~=value] |
[class~=column-thin] |
Matches all elements that have a class attribute whose value is a whitespace-seperated list of words, one of which is exactly the value "column-thin".
The difference between ~= and = is an attribute can have many values if = is used all values for that attribute must be entered to work. Whereas ~= only one value
for the attribute has to match.
|
| [attr|=value] |
[class|=column] |
Matches elements that have a class attribute with a value that is exactly column or starts with column and immediatly followed by a hyphen. Can be useful if you
had several classes with the values column-thin, column-medium, column-large. The selector would be used to select all that start with column. |
| [attr^=value] |
[class^=col] |
Matches elements that have a class attribute with a value prefixed (preceded) with "col". This will select all classes that begin with "col" ie column-thin |
| [attr$=value] |
[class$=hin] |
Matches elements that have a class attribute with a value suffixed (followed) by "hin". This will select all classes that end with "hin" ie column-thin |
| [attr*=value] |
[class*="mn-th"] |
Matches elements that have a class attribute with a value with at least one occurance of value within the string by "mn-th". This will select all classes that end with "hin" ie column-thin |
| [attr operator value i] |
[class="COLUMN-THIN" i] |
Case Insensitively. The case of the value is case-insensitive and will match class="column-thin" |
| [attr operator value s] |
[class="COLUMN-THIN" s] |
Case Sensitive, the value is compared case-sensitively. |