>> English << | česky | PortuguêsZVON > Tutorials > CSS2 tutorial
>> Example 3 << | Prev | Next | Index | Contents

Names separated by whitespace match elements specified by the last name. The other names must occur somewhere on the road from root to this element . They are ancestors of this element (1). If the element names are separated with [>], the element on the right must be directly inside the left element (a child) (2). The character [*] can be used to achieve some interesting effects. In the (3) grand-children of AAA element are red colored. The ddd2 element while not a granchild is also colored as it inherits color from its parent

XML SourceCSS stylesheetExample link
(1)
     <AAA>
          <BBB>
               <DDD>ddd1
                    <DDD>ddd2</DDD>
               </DDD>
          </BBB>
          <CCC>
               <DDD>ddd3</DDD>
          </CCC>
          <DDD>ddd4</DDD>
          <OOO>
               <PPP>
                    <RRR>rrr1</RRR>
               </PPP>
          </OOO>
          <RRR>rrr2</RRR>
     </AAA>

AAA CCC DDD {color:blue}
BBB DDD {color:maroon}
OOO RRR {color:red}
View output
XML SourceCSS stylesheetExample link
(2)
     <AAA>
          <BBB>
               <DDD>ddd1
                    <DDD>ddd2</DDD>
               </DDD>
          </BBB>
          <CCC>
               <DDD>ddd3</DDD>
          </CCC>
          <DDD>ddd4</DDD>
          <OOO>
               <PPP>
                    <RRR>rrr1</RRR>
               </PPP>
          </OOO>
          <RRR>rrr2</RRR>
     </AAA>

AAA > CCC > DDD {color:blue}
BBB > DDD {color:maroon}
OOO > RRR {color:red}
View output
XML SourceCSS stylesheetExample link
(3)
     <AAA>
          <BBB>
               <DDD>ddd1
                    <DDD>ddd2</DDD>
               </DDD>
          </BBB>
          <CCC>
               <DDD>ddd3</DDD>
          </CCC>
          <DDD>ddd4</DDD>
          <OOO>
               <PPP>
                    <RRR>rrr1</RRR>
               </PPP>
          </OOO>
          <RRR>rrr2</RRR>
     </AAA>

AAA > * > * {color:red}
View output