Notes
There are five pseudo classes you can use with CSS. CSS 3 has many more, however most browsers do not support CSS 3. The five current pseudo classes are:
:hover
Hover can be used to style an element. Whenever the mouse "hovers" over the element, it will use the style that :hover is attached to.
:active
Applied when someone "clicks" the element
:focus
Applied when the element has focus.
:visited
Applied to all visited Hyperlinks.
:link
Applies when you have an unvisited Hyperlink
Always remember that Styles are Cascading. Which means you might right a :link, :visited and :hover, but it depends in the order you right because they are
Cascading.
| Column 1 |
Column 2 |
Column 3 |
| Column 1 Row 1 |
Column 2 Row 1 |
Column 3 Row 1 |
| Column 1 Row 2 |
Column 2 Row 2 |
Column 3 Row 2 |
| Column 1 Row 3 |
Column 2 Row 3 |
Column 3 Row 3 |
| Column 1 Row 4 |
Column 2 Row 4 |
Column 3 Row 4 |
| Column 1 Row 4 |
Column 2 Row 4 |
Column 3 Row 4 |
| Text in Span |
Text in Span |
Text in Span |
Textbox with :focus
Textbox with :active
Textbox with :hover
HTML Markup
<table id="MyTable" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</thead>
<tr>
<td>Column 1 Row 1</td>
<td>Column 2 Row 1</td>
<td>Column 3 Row 1</td>
</tr>
<tr>
<td>Column 1 Row 2</td>
<td>Column 2 Row 2</td>
<td>Column 3 Row 2</td>
</tr>
<tr>
<td>Column 1 Row 3</td>
<td>Column 2 Row 3</td>
<td>Column 3 Row 3</td>
</tr>
<tr>
<td>Column 1 Row 4</td>
<td>Column 2 Row 4</td>
<td>Column 3 Row 4</td>
</tr>
<tr class="row1">
<td class="column1">Column 1 Row 4</td>
<td class="column2">Column 2 Row 4</td>
<td class="column3">Column 3 Row 4</td>
</tr>
<tr>
<td><span>Text in Span</span></td>
<td><span>Text in Span</span></td>
<td><span>Text in Span</span></td>
</tr>
</table>
<h2>
Textbox with :focus</h2>
<div class="focus">
<input type="text" />
</div>
<h2>
Textbox with :active</h2>
<div class="active">
<input type="text" />
</div>
<h2>
Textbox with :hover</h2>
<div class="hover">
<input type="text" />
</div>
CSS
#MyTable
{
width:460px;
}
#MyTable td
{
width:150px;
}
#MyTable td:hover
{
background-color:Black;
color:Yellow;
}
#MyTable tr:hover
{
border: solid 1px green;
background-color:Yellow;
color:Maroon;
}
#MyTable thead tr:hover
{
background-color:ThreeDShadow;
color:White;
}
#MyTable td span:hover:after
{
content: "\00BB";
}
#MyTable td span:hover:before
{
content:"\00AB";
}
#MyTable .row1
{
border:solid 1px white;
}
#MyTable .row1:hover
{
background-color:Aqua;
color:Navy;
}
#Mytable .column1:hover
{
background-color: #1b1b1b;
color: Yellow;
}
#MyTable .column2:hover
{
background-color: #545454;
color: Yellow;
}
#MyTable .column3:hover
{
background-color: #8c8c8c;
color: Yellow;
}
#MyTable .row1 td:hover:before
{
content:open-quote;
}
#MyTable .row1 td:hover:after
{
content:close-quote;
}
.active input:active
{
background-color:pink;
}
.focus input:focus
{
background-color:Green;
}
.hover input:hover
{
background-color:Blue;
}