Entry

How can I apply different styles to the same element when it is within other elements?

Jun 13th, 2000 05:21
Rey Nuņez, http://www.w3.org/TR/REC-CSS2/selector.html

CSS supports contextual styles, which refer to styles that may be 
applied to elements within the context of other elements.

Let us take for example the basic text formatting elements B (bold) and 
I (italic). Browsers render them distinctly by default for emphasis. 
CSS allows us to format these elements otherwise, like
 
b, strong {
  color:#030
}
i, em, dfn {
  font-family:"Bookman Old Style","Times New Roman",serif;
  font-weight:600;
  color:#666
}

which will apply a default style to all bold and italic text.

If we want to apply different styles to different variants of these 
elements, we declare the styles by chaining or combining selectors, in 
the general form:
selector selector {declaration block}

For example, to style bold and italic text within UL elements 
(unordered lists):

ul b, ul strong {
  color:#fc6
}
ul i, ul em, ul dfn {
  font-family:"Bookman Old Style","Times New Roman",serif;
  font-weight:600;
  color:#fc6
}

Likewise, links within a paragraph or within other elements may be 
rendered differently, for distinction. For example, to apply a style 
for links within a DIV element: 

div a:link, div a:visited, div a:active {
  font:bold 10pt Arial;
  color:#9cf;
  text-decoration:none
}
div a:hover {
  color:#6f9; font-variant:small-caps
}

Please refer to
http://www.faqts.com/knowledge-base/view.phtml/aid/2379/fid/337/lang/
for applying default link styles.