CSS Direct Child + First Child

by Ben Clayton

HTML

<div class="par">
  <div class="child">
  1
  </div>
  <div class="child">
  2
  </div>
  <div class="child">
   3
   <div class="child">
    3.1
   </div>
   <div class="child">
    3.2
   </div>
  </div>


</div>

CSS

div {
  border: black solid 1px;
}

.par {
  width: 200px;
}

.child {
  padding:10px;
  margin: 10px auto;
  width: 60%;
}

.par>.child {
  border: red solid 1px;
}
.child:first-child:after{
  content:"*";
}