Conditional childs width

Using :only-child, define a width contionned to the presence of one or two childs.

<!DOCTYPE html>
<html >
  <meta charset="UTF-8">
  <title>Conditional childs width</title>
      <link rel="stylesheet" href="css/style.css">


  <h1>Conditional width</h1>
<h2>If there are two childs</h2>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>

<h2>If there is only one child</h2>
<div class="parent">
  <div class="child"></div>
    <script src="js/index.js"></script>

/* Downloaded from https://ahoj.co.uk/ */
div {
  height: 200px;
  background: rgba(0,0,0,0.2)
.parent {
  width: 500px;
  padding: 10px;
  margin: 1em auto;
.child {
  width: 49%;
.child + .child {
  margin-left: 2%;

/* if .child missing ? */
.child:only-child {
  width: 100%;

/* some styles */
h1, h2 {
  font-family: "Open Sans", "Segoe UI", Helvetica, Arial;
  color: #666;
  font-weight: lighter;
/* Downloaded from https://ahoj.co.uk/ */
/* no JS */

This awesome code is write by Geoffrey Crofte, you can se more from this user in the personal repository