CSS style collapse after i use an ID as a parent element

Question

(function() {

  var activateEl = $('div.activate'),
      activateElOffset = activateEl.offset().top / 2,
      documentEl = $(document);

  documentEl.on('scroll', function() {
      if (documentEl.scrollTop() > activateElOffset) {
          activateEl.each(function() {
              $(this).css("width", $(this).data("percent"));
          });
      }
  });
})();

p {
    height: 800px;
}

#skillbar div {
    background: #05103a;
    color: white;
    width: 10%;
    transition: 2s;
    border-radius: 5px;
    text-indent: 5px;
    white-space: nowrap;
}

.bar {
    background: #e6e6e6;
    width: 100%;
    margin-bottom: 5px;
    margin-left: 0;
    border-radius: 5px;
    border: 2px solid #e6e6e6;
}

#skillbar {
    margin-left: 15%;
    margin-right: 15%;
    padding: 10px;
}

<p></p>
<section id="skillbar">
    <div class="bar">
        <div class="activate" data-percent="90%" style="transition-timing-function: linear;">C++</div>
    </div>
    <div class="bar">
        <div class="activate" data-percent="100%" style="transition-timing-function: ease;">C#</div>
    </div>
    <div class="bar">
        <div class="activate" data-percent="50%" style="transition-timing-function: ease-in;">Java</div>
    </div>
    <div class="bar">
        <div class="activate" data-percent="100%" style="transition-timing-function: ease-out;">HTML</div>
    </div>
    <div class="bar">
        <div class="activate" data-percent="50%" style="transition-timing-function: ease-in-out;">CSS</div>
    </div>
    <div class="bar">
        <div class="activate" data-percent="20%" style="transition-timing-function: ease;">JavaScript</div>
    </div>
    <div class="bar">
        <div class="activate" data-percent="50%" style="transition-timing-function: ease-out;">SQL</div>
    </div>
    <div class="bar">
        <div class="activate" data-percent="30%" style="transition-timing-function: ease-out;">CISCO</div>
    </div>
    <div class="bar">
        <div class="activate" data-percent="10%" style="transition-timing-function: linear;">Python</div>
    </div>
    <div class="bar">
        <div class="activate" data-percent="80%" style="transition-timing-function: ease-in-out;">Microsoft Office</div>
    </div>
    <div class="bar">
        <div class="activate" data-percent="40%" style="transition-timing-function: ease;">GIMP</div>
    </div>
</section>
<p></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I'm doing a skills bar graph, which activate on scrolling. I wanna insert it into my page, so i have to use an id on that section, but if i use #skillbar div{...} instead of div{...} it is collapse and doesn't work, and i really dont understand why.

That style should to be on all divs inside the #skillbar section, and if i know right, with space between the two element i select that relation. So what's wrong with it?