Possitioning CSS Classes according to the HTML

HTML & CSS
1

Do I have 5 in the right spot?

If you see anything I messed up on please let me know.

According to the html

1st.) This comes first

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

2nd.) Then Cover:

.wrape .cover {
  width: 266px;
  height: 174px;
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat 0 0;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrape .cover {
  display: none;
}

.wrape.inactive .cover {
  display: block;
}

.wrape .cover::before,
.wrape .cover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.wrape .cover::after {
  left: 177px;
}

3rd.) Then these would come right before the ‘a’ anchor tag.

.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  float: left;
}

4th.) Then the ‘a’ anchor tags would come next:

.nav a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.nav a:hover {
  border: 3px solid red;
}

.nav li:nth-of-type(5n) a {
  margin-right: 0;
}

.nav li:nth-of-type(8) a {
  opacity: 0;
}

.nav li:nth-of-type(15) a {
  position: relative;
  border: 3px solid #0059dd;
  background: none;
}

.nav li:nth-of-type(15) a .left-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 100%;
  background: rgba(0, 255, 255, 0.5);
}

.nav li:nth-of-type(15) a .left-border {
  position: absolute;
  top: 0;
  left: 12px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.nav li:nth-of-type(15) a .middle-background {
  position: absolute;
  top: 0;
  left: 15px;
  width: 14px;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
}

.nav li:nth-of-type(15) a .right-border {
  position: absolute;
  top: 0;
  left: 29px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.nav li:nth-of-type(15) a .right-background {
  position: absolute;
  top: 0;
  left: 32px;
  width: 12px;
  height: 100%;
  background: rgba(255, 0, 255, 0.5);
}

5th.) Then these would come next? but I have no idea why.

.wrape.inactive a {
  display: none;
}

.wrape.inactive .playButtone {
  display: none;
}

6th.) Then these would come after that.

.wrape.active .playButtone {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, .7);
  cursor: pointer;
  fill: #aaff00;
}

.wrape.active {
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat -260px 0;
}

.wrape .play,
.wrape .pause {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
}

.wrape .pause {
  left: 0;
}

.wrape .hide {
  display: none;
}

HTML

<audio></audio>


<div class="wrape">
  <div class="cover" title="OPEN"></div>
  <ul class="nav">
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li><a> Audio Player</a></li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="#" target="_blank" title=""></a>
    </li>
    <li>
      <a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
        <div class="left-background"></div>
        <div class="left-border"></div>
        <div class="middle-background"></div>
        <div class="right-border"></div>
        <div class="right-background"></div>
      </a>
    </li>
  </ul>





  <div class="playButtone" data-audio="http://hi5.1980s.fm/;">


    <svg class="play hide" focusable="false" width="38" height="40" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
        <title>PLAY</title>
      </path>
    </svg>
    <svg class="pause hide" focusable="false" width="36" height="40" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
        <title>PAUSE</title>
      </path>
    </svg>
  </div>
</div>
2

As I said in your other thread, there is no single “right” order.

Are your CSS rules now in a logical order which makes sense to you and which makes it easy to read and to find relevant rules?

Are the CSS rules still being applied as you intended?

If the answers to those two questions are “yes”, then you have your answer.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.