>> English << | česky | PortuguêsZVON > Tutorials > CSS2 tutorial
Intro / Search / ZVON
>> Example 7 << | Prev | Next | Index | Contents

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 SourceCSS stylesheetExample 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 SourceCSS stylesheetExample 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 SourceCSS stylesheetExample 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