Elements can be distinguished according to their attributes. They can be tested if they contain an attribute (1) or even their values can be compared (2). If operator ~= is used for the comparison then the compared value must match any part of the attribute value separated by spaces (3).
| XML Source | CSS stylesheet | Example link |
|---|---|---|
|
(1)
<AAA> <BBB number = "234">234</BBB> <BBB number = "222 345 234">222</BBB> <BBB number = "111 234">111</BBB> <BBB text = "xxx aaa bbb">xxx</BBB> <BBB text = "yyy">yyy</BBB> <BBB name = "bbb">bbb</BBB> </AAA> | BBB[text] {color:blue} BBB[number] {color:red} | View output |
| XML Source | CSS stylesheet | Example link |
|
(2)
<AAA> <BBB number = "234">234</BBB> <BBB number = "222 345 234">222</BBB> <BBB number = "111 234">111</BBB> <BBB text = "xxx aaa bbb">xxx</BBB> <BBB text = "yyy">yyy</BBB> <BBB name = "bbb">bbb</BBB> </AAA> | BBB[text="xxx aaa bbb"] {color:blue} BBB[text='yyy'] {color:green} BBB[number="111 234"] {color:red} BBB[number='222 345 234'] {color:purple} | View output |
| XML Source | CSS stylesheet | Example link |
|
(3)
<AAA> <BBB number = "234">234</BBB> <BBB number = "222 345 234">222</BBB> <BBB number = "111 234">111</BBB> <BBB text = "xxx aaa bbb">xxx</BBB> <BBB text = "yyy">yyy</BBB> <BBB name = "bbb">bbb</BBB> </AAA> | BBB[text~="aaa"] {color:blue} BBB[number~="234"] {color:red} | View output |