CODEWITHSUNDEEP
htmlcss
user5634387
user5634387

Reputation:

CSS class works for table interior but not for table itself

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 NOT OK

When I add the same style again to table selector it works fine

<table class="border-on" style="border: 1px solid black">

OK

I have different tables, so I need to use classes to define each of them.

Upvotes: 2

Views: 32

Answers (2)

imvain2
imvain2

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

melvin
melvin

Reputation: 2621

using * selector in css takes all child elements not the selected one. That's the default behaviour

Upvotes: 1

Related Questions