CSS Selectors

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>

Wisenheimer Brainstorm Wiki

User Tools

Site Tools

CSS Selectors

Page Tools