Selecting sibling element (SCSS)

Tutorials of (Selecting sibling element (scss)) by Chocopie

<!DOCTYPE html>
<html >
<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/ */
.family {
  padding: 0;
}

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

.sibling {
  display: none;
}

.me:hover {
  color: firebrick;
}
.me:hover + .sibling {
  display: block;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Selecting sibling element (SCSS) ) is write by chocopie, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © chocopie