English | >> česky << | PortuguêsZVON > Tutorials > CSS2 tutorial
>> Příklad 7 << | Předešlý | Následující | Index | Obsah

Elementy mohou být odlišeny díky jejich atributům. Můžeme testovat, zda atribut mají (1) nebo dokonce můžeme hodnotu jejich atributu porovnávat (2). Pokud je pro srovnání použit operátor ~=, tak stačí, že srovnávaná hodnota odpovídá jedné z částí atributu, oddělených mezerami (3).

XML dokumentCSS stylOdkaz na příklad
(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}
Zobraz výstupy
XML dokumentCSS stylOdkaz na příklad
(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}
Zobraz výstupy
XML dokumentCSS stylOdkaz na příklad
(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}
Zobraz výstupy