CSS Toggle Switch without classes / id

I am working right now on a project for my web-engineering course at my university. We have to create some kind of school management site and are , right now , only allowed to use plain HTML and CSS with the restriction that we work in CSS without classes and ids , only selectors are allowed.

Now i wanted to add a toggle switch button to our page and i found this website (http://ift.tt/1u1WO2p) where you can create your own toggle button. But the code you receive works with classes which I am not allowed to use so i tried to alter the code so that it would just use selectors but it won´t work. Maybe someone can help me here to understand my mistake ( beside copying a code snippet instead of working out something ).

div:last-of-type {
  position: relative;
  width: 67px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
input[type="checkbox"] {
  display: none;
}
label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  height: 22px;
  padding: 0;
  line-height: 22px;
  border: 2px solid #CCCCCC;
  border-radius: 22px;
  background-color: #FA1212;
  transition: background-color 0.3s ease-in;
}
label:before {
  content: "";
  display: block;
  width: 22px;
  margin: 0px;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 43px;
  border: 2px solid #CCCCCC;
  border-radius: 22px;
  transition: all 0.3s ease-in 0s;
}
input[type="checkbox"]:checked + label {
  background-color: #28CF25;
}
input[type="checkbox"]:checked + label,
input[type="checkbox"]:checked +label:before {
  border-color: #28CF25;
}
input[type="checkbox"]:checked + label:before {
  right: 0px;
}

<div>
  <input type="checkbox" name="onoffswitch" checked>
  <label for="myonoffswitch"></label>
</div>