Loading

Conditional childs width

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

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

  
</head>

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

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

</body>
</html>
/* 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%;
  float:left;
}
.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;
  text-align:center;
  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