Understanding CSS "section.positioned" Selector

Question

Can some one explain the following css code I found in a web page and which element does the section.positioned affect?

section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 500px;
  box-shadow: 0 0 15px #333;
}

Part of web page code

<section class="">
  <div class="container">
    ......
  </div>
</section>

correct me if I'm wrong, but does your question stem from [this fiddle](https://jsfiddle.net/dPixie/byB9d/3/light/)? If so, I created an updated version [here](https://jsfiddle.net/byB9d/7442/) which should make things a little clearer. — SausageFingers, Nov 05 '15 at 17:26

score 3 · Accepted Answer · edited May 23 '17 at 12:17

The section.positioned rule target an element like this:

<section class="positioned">

</section>

By changing the existing html section element's class from empty to "positioned", the section.positioned rule will apply to the element instead of the section rule.

Added:

What section.positioned really means is it target an element of type "section" which has a class named "positioned".

Understanding CSS "section.positioned" Selector

1 Answers1