Reputation:
Following is a simple CSS code but I am unable to figure out why it's not working.
<!DOCTYPE html>
<html>
<head>
<style>
.border-on * {
border: 1px solid black;
}
</style>
</head>
<body>
<table class="border-on">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
</body>
</html>
CSS style is applied for td's and th's but not for the table! So the table looks like this
When I add the same style again to table selector it works fine
<table class="border-on" style="border: 1px solid black">
I have different tables, so I need to use classes to define each of them.
Upvotes: 2
Views: 32
Reputation: 15867
*
is a universal selector that represents "all children" but not the object itself. I modified your CSS to include the table itself.
.border-on,
.border-on * {
border: 1px solid black;
}
<table class="border-on">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>
Upvotes: 1
Reputation: 2621
using *
selector in css takes all child elements not the selected one. That's the default behaviour
Upvotes: 1