CSS Universal Selector (*) not showing a border with parent element-CodePudding

I have made a class ".ancestors" and assigned it to both parent and child divs. This class is showing border around the child div but not around the parent. Can someone please advise why is this happening? Which is the correct way here - *.ancestors or .ancestors * ?

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *{ 
  display: block;
  border: 2px solid lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
</head>
<body>

<div >
Parent
<div >Child</div>
</div>

</body>
</html>

CodePudding user response：

*.ancestors - is any element that additionally has a class ancestors, but this is a waste of resources, it's the same as just .ancestors without *

.ancestors * - it is any child of a parent with a class ancestors.

CodePudding user response：

use

.ancestors { 
    display: block;
    border: 2px solid lightgrey;
    padding: 5px;
    margin: 15px;
}

instead of

.ancestors *{ 
  display: block;
  border: 2px solid lightgrey;
  padding: 5px;
  margin: 15px;
}