Example | Description |
---|---|
td { font-family: Tahoma; } | applies the style to all td elements |
#rect { width: 30%; } | applies the style to the element with id=“rect” |
#rect td { padding: 5px; } | applies the style to the td elements inside the element with id=“rect” |
.main { border-collapse: collapse; } | applies the style to elements with class=“main” |
table.main td { text-align: right; } | applies the style to the td elements inside the table elements with class=“main” |
#rect td[title=error] { color: red; } | applies the style to the td elements that have the attribute title=“error”; the td elements are located inside an element with id=“rect” |
#rect tr[title=item] td { height: 30px; } | applies the style to the td elements that are children of a tr element with title=“item”; the td and tr elements are located inside an element with id=“rect” |
#rect tr[title=item] td[title=bar] { background-position: center; } | applies the style to the <td title=“bar”> elements inside an element with id=“rect”; the td elements are children of an <tr title=“item”> element |
<table id="rect" cellpadding="0" cellspacing="0"> <tr> <td>OK</td> <td>OK</td> <td title="error">Error</td> </tr> <tr title="item"> <td>111</td> <td>222</td> <td title="bar"></td> </tr> </table>
Apply multiple classes to a single tag:
<html> <head> <title>Test</title> <style type="text/css"> .border-dashed { border-style: dashed; border-width: 1px; border-color: #C0C0C0; padding: 5px; width: 160px; } /* text-generic and text-special are used to demonstrate multiple class usage */ .text-generic { font-family: Tahoma; font-size: 9pt; color: #808080; } .text-special { font-family: Tahoma; font-size: 9pt; color: #EE2000; } /* text-special refinement for a specific tag - it has an effect only when used with a DIV tag. font-family and font-size are inherited from text-special */ div.text-special { color: #0020EE; } </style> </head> <body> <!-- apply multiple classes to a single tag --> <p class="border-dashed text-generic">Generic text</p> <!-- text-special takes precedence over text-generic and turns fonts red --> <p class="border-dashed text-generic text-special">Special text</p> <div>Plain text in DIV tag</div> <!-- class text-special has special meaning for the DIV tag --> <div class="text-special">Special text in DIV tag</div> </body> </html>
A child selector matches when an element is a child of another element. For the '>' rule to work the element must be a direct child of another element i.e. the rule is applied only for the first level children.
A descendant selector of the form “A B” matches when an element B is an arbitrary descendant of some ancestor element A i.e. the rule applies for children at any depth.
Example: The following rule sets the style of a P element that is a direct child of DIV:
<html> <head> <title>Test</title> <style type="text/css"> div > p { font-family: arial; color: Red; } </style> </head> <body> <p>P element as a child of BODY</p> <div> <p>P element as a direct child of DIV</p> </div> </body> </html>
Example: Using :before and :after pseudo-classes:
<!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css"> /* place brackets around a word */ span.CurlyBrackets:before {content: "{";} span.CurlyBrackets:after {content: "}";} span.SquareBrackets:before {content: "[";} span.SquareBrackets:after {content: "]";} /* define a prefix */ div.Person1:before {content: "Steve: "; color:red;} div.Person2:before {content: "Bob: "; color:blue;} </style> </head> <body> Brackets:<br /> <span class="CurlyBrackets">Hello</span> in curly brackets<br /> <span class="SquareBrackets">Hello</span> in square brackets<br /> <br /> Conversation: <div class="Person1">Hi!</div> <div class="Person2">Good to see you.</div> <div class="Person1">Yeah</div> </body> </html>