Selecting sibling element (SCSS)

In this example below you will see how to do a Selecting sibling element (SCSS) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by chocopie, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chocopie ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Selecting sibling element (SCSS)</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <ul class="family">
  <li class="parent">
    <a href="#" class="me">My sibling does 2 poos</a>
    <ul class="sibling">
      <li class="poo">Poo</li>
      <li class="poo">Poo</li>
    </ul>
  </li>
  <li class="parent">
    <a href="#" class="me">My sibling does 3 poos</a>
    <ul class="sibling">
      <li class="poo">Poo</li>
      <li class="poo">Poo</li>
      <li class="poo">Poo</li>
    </ul>
  </li>
</ul>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/chocopie/selecting-sibling-element-scss-AabIl */
.family {
  padding: 0;
}

.parent {
  float: left;
  display: inline-block;
  padding: 10px;
}

.sibling {
  display: none;
}

.me:hover {
  color: firebrick;
}
.me:hover + .sibling {
  display: block;
}

Comments