CSS patterns, selectors, pseudo-classes
To understand how CSS Selectors work, let's use the following web page as an example:
<html>
<head>
<title>CSS</title>
<style type='text/css'>
body {background: $FFFFEE; font-family:Calibri, Corbel, Arial; font-size: 12px;}
table {border: 1px solid #CCCCCC;}
h4 {margin-bottom: -1px; font-variant: small-caps;}
.row1 {background: #EEE;}
.row2 {background: #DDD;}
.row3 {background: #CCC;}
.row4 {background: #BBB;}
td {padding:5px;}
.btn_blue {width: 75px; color: blue;}
.btn_green {width: 75px; color: green;}
</style>
</head>
<body>
<h4>John Smith <input type=checkbox name="select" /></h4>
<table id='table1'>
<tr class='row1' id=BPT>
<td>View ID</td>
<td><input type='button' value='Button 1' class='btn_blue' id='btnfirst'></td>
</tr>
<tr class='row2' id=QC>
<td>View Address</td>
<td><input type='button' value='Button 2' class='btn_blue'></td>
</tr>
<tr class='row3' id=QTP>
<td>View Phone Number</td>
<td><input type='button' value='Button 3' class='btn_green'></td>
</tr>
</table>
<h4>Anne Anderson <input type="checkbox" name="select" checked=true /></h4>
<table id='table2'>
<tr class='row1' id=BPT>
<td>View ID</td>
<td><input type='button' value='Button 4' class='btn_blue'></td>
</tr>
<tr class='row2' id=QC>
<td>View Address</td>
<td><input type='button' value='Button 5' class='btn_blue'></td>
</tr>
<tr class='row3' id=QTP>
<td>View Phone Number</td>
<td><input type='button' value='Button 6' class='btn_green'></td>
</tr>
<tr class='row4' id=QTP>
<td>View FAX Number</td>
<td><input type='button' value='Button 7' class='btn_green'></td>
</tr>
</table>
</body>
</html>
Some of the important CSS patterns are described below:
| Pattern | Description |
| * | Matches any node. |
| p | Matches any P(paragraph) node. |
| table tr | Matches any TR node that is the descendant of TABLE node. |
| table > tr | Matches any TR node that is the child of TABLE node. |
| h4 + table | Matches any TABLE node that is preceded by H4. |
Note: The CSS expressions in the examples below come from the HTML source at the beginning of this chapter.
| Selector | Description | Example | Description |
| .class | Selects all elements with the supplied CLASS(CSS1). | .row1 | Selects all elements where CLASS = row1. |
| #id | Selects the element with the supplied ID(CSS1). | #table1 | Selects the element with ID = table1. |
| * | Selects all elements(CSS2). | * | Selects all elements. |
| element | Selects the supplied elements(CSS1). | Input | Selects all <input> elements. |
| [attribute] | Selects all elements with the supplied attribute(CSS2). | [id] | Selects all elements with the ID attribute. |
| [attribute=value] | Selects all elements with the supplied attribute where ATTRIBUTE equals VALUE(CSS2). | [class=btn_blue] | where the CLASS attribute equals btn_blue. |
| [attribute~=value] | Selects the element whose ATTRIBUTE is a list of whitespace-separated values,one of which is exactly equal to VALUE(CSS2). | [innertext~=John] | Selects the element where the INNERTEXT is a list of whitespace-seperated values,one of which is exactly equal to JOHN. |
| [attribute^=value] | Selects all elements where ATTRIBUTE value begins with VALUE(CSS3). | [class^=btn] | Selects all elements where the CLASS attribute begins with btn. |
| [attribute$=value] | Selects all elements where ATTRIBUTE value ends with VALUE(CSS3). | [class$=green] | Selects all elements where the CLASS attribute ends with green. |
| [attribute*=value] | Selects all elements where ATTRIBUTE value contains the substring VALUE(CSS3). | [class*=w4] | Selects all elements where the CLASS attribute contains the substring w4. |
| :first-of-type | Selects every element that is the first child of its parent(CSS3). | input:first-of-type | Selects every INPUT element that is the first INPUT element of its parent. |
| :last-of-type | Selects every element that is the last child of its parent(CSS3). | input:last-of-type | Selects every INPUT element that is the last INPUT element of its parent. |
| :only-of-type | Selects every element that is the only child of its parent(CSS3). | input:only-of-type | Selects every INPUT element that is the only INPUT element of its parent. |
| :nth-child(n) | Selects every element that is the nth child of its parent(CSS3). | input:nth-child(1) | Selects every INPUT element that is the first child of its parent. |
| :nth-of-type(n) | Selects every specified element that is the nth element of its parent(CSS3). | input:nth-of-type(1) | Selects every INPUT element that is the first INPUT element of its parent. |
| :nth-last-of-type(n) | Selects every specified element that is the nth element of its parent, counting from the last child(CSS3). | :nth-last-of-type(1) | Selects every INPUT element that is the first INPUT element of its parent,starting from the last child. |
The next table details the CSS pseudo-classes.
| Pseudo-Class | Description | Example | Description |
| :last-child | Selects every element that is the child of its parent(CSS3). | td:last-child | Selects every TD element that is the last child of its parent. |
| :root | Selects the document root element(CSS3). | :root | Selects the document root element. |
| :enabled | Selects every specified element that is enabled(CSS3). | input:enabled | Selects every enabled INPUT element. |
| :disabled | Selects every specified element that is disabled(CSS3). | input:disabled | Selects every disabled INPUT element. |
| :checked | Selects every specified element that is checked(CSS3). | input:checked | Selects every checked INPUT element. |
