CSS JQuery: Styling specific rows of a table using pseudo-classes.

CSS pseudo-classes are used to add special effects to some selectors.

HTML :)

<title>pseudo-classes</title>
<body>
<table width="400" border="1">
<tbody>
<tr>
<th colspan="3" scope="col">Things I want for my birthday!</th>
</tr>
<tr>
<th width="50" scope="col">Item #</th>
<th width="75" scope="col">Item Name</th>
<th width="215" scope="col">Cost</th>
</tr>
<tr>
<td>1</td>
<td>Mercedes SLS</td>
<td>$225,000</td>
</tr>
<tr>
<td>2.</td>
<td>Home in Beverly Hills</td>
<td>$50,000,00</td>
</tr>
<tr>
<td>3.</td>
<td>One of those curved TVs</td>
<td>$5,000</td>
</tr>
<tr>
<td>4.</td>
<td>Goldmund Speakers</td>
<td>$300,000</td>
</tr>
<tr>
<td>5.</td>
<td>An envelope full of money</td>
<td>$100,000</td>
</tr>
<tr>
<td>6.</td>
<td>Apple Stock</td>
<td>$5,000,000</td>
</tr>
<tr>
<td>7.</td>
<td>Vitamix 7500 Blender</td>
<td>$529</td>
</tr>
<tr>
<td>8. </td>
<td>Executive Membership at Costco</td>
<td>$150</td>
</tr>
<tr>
<td>9.</td>
<td>A briefcase full of money</td>
<td>$5,000,000</td>
</tr>
<tr>
<td>10. </td>
<td>Dog</td>
<td>$500</td>
</tr>
</tbody>
</table>

CSS :)

@charset "UTF-8";
/* CSS Document */

tr:nth-child(odd) {
background-color: #a9cdeb;
}

tr td:last-child{
font-style: italic;
}
tr:nth-child(3), tr:nth-child(4), tr:nth-child(5){
color: red;
}

tbody tr: {
color: #FF0004;
fo
}

CSS JQuery

Monday, September 15, 2014

Styling specific rows of a table using pseudo-classes.

HTML :)

CSS :)

Output :)

No comments:

Post a Comment