Coloured table only on odd table data using nth-child-of-type(odd)
Name |
Score |
Mark |
Jino |
2100 |
100 |
Arun |
3200 |
280 |
Febin |
3400 |
250 |
Devan |
4100 |
210 |
There are different types of nth child element element but ther i am explaining only about the nth-child-of-type(even) and nth-child-of-type(odd). The nth child even is used to select all the childs of that particular element that are even childs. The nth child odd is used to select the child of odd ones that I used in the above table to select the odd table data to change their color to light orange. I hope you can understand the following code.Try to read the code.
The :nth-child selector allows you to select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling elements.
Code:
<html>
<head>
<title>
Coloured table only on odd table data using nth-child-of-type(odd)
</title>
<style>
.tabl
{
padding:1px;
}
table tr:nth-of-type(odd) td
{
background-color: #FFB2B3;
}
table th {
background-color: #FF6B6D;
}
</style>
</head>
<body>
<br />
<table align="center" border="2" cellpadding="30" cellspacing="0" class="tabl" style="font-family: "arial"; height: 20%; padding: 500px; width: 80%;">
<tr>
<th>Name</th>
<th>Score</th>
<th>Mark</th>
</tr>
<tr>
<td>Jino</td>
<td>2100</td>
<td>100</td>
</tr>
<tr>
<td>Arun</td>
<td>3200</td>
<td>280</td>
</tr>
<tr>
<td>Febin</td>
<td>3400</td>
<td>250</td>
</tr>
<tr>
<td>Devan</td>
<td>4100</td>
<td>210</td>
</tr>
</table>
</body>
</html>
|
Thank You...Stay Updated
Comments
Post a Comment