How should these CSS classes be positioned? - html

Question

How would you position these CSS classes?
I'm talking about the order from 1st to last. Top to bottom.
Starting with .wrap, ending with .hide.
I just readjusted all of these classes, but which would be a good way line these up?
All help would be greatly appreciated.
Something like this?
https://jsfiddle.net/49ajbhte/35/
<div class="wrape">
<div class="covere" title="OPEN"></div>
<ul class="nav">
.wrape {
position: relative;
width: 266px;
height: 174px;
margin-top: 8px;
overflow: hidden;
}
.covere {
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;
}
.covere {
display: none;
}
.inactivee .covere {
display: block;
}
.covere::before,
.covere::after {
content: "";
position: absolute;
top: 0;
left: 86px;
width: 3px;
height: 100%;
background: #0059dd;
}
.covere::after {
left: 177px;
}
.nav {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
float: left;
}
.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;
}
.left-background {
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 100%;
background: rgba(0, 255, 255, 0.5);
}
.left-border {
position: absolute;
top: 0;
left: 12px;
width: 3px;
height: 100%;
background: #0059dd;
}
.middle-background {
position: absolute;
top: 0;
left: 15px;
width: 14px;
height: 100%;
background: rgba(255, 255, 255, 0.5);
}
.right-border {
position: absolute;
top: 0;
left: 29px;
width: 3px;
height: 100%;
background: #0059dd;
}
.right-background {
position: absolute;
top: 0;
left: 32px;
width: 12px;
height: 100%;
background: rgba(255, 0, 255, 0.5);
}
.inactivee a {
display: none;
}
.inactivee .playButtone {
display: none;
}
.activee .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;
}
.activee {
background: url("https://i.imgur.com/dCneQvW.png") no-repeat -260px 0;
}
.playe,
.pausee {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 6px;
margin: auto;
}
.pausee {
left: 0;
}
.hide {
display: none;
}
or like this:
https://jsfiddle.net/49ajbhte/33/
<div class="wrape">
<div class="covere" title="OPEN"></div>
<ul class="nav">
.wrap {
position: relative;
width: 266px;
height: 174px;
margin-top: 8px;
overflow: hidden;
}
.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 {
position: relative;
border: 3px solid #0059dd;
background: none;
}
.left-background {
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 100%;
background: rgba(0, 255, 255, 0.5);
}
.left-border {
position: absolute;
top: 0;
left: 12px;
width: 3px;
height: 100%;
background: #0059dd;
}
.middle-background {
position: absolute;
top: 0;
left: 15px;
width: 14px;
height: 100%;
background: rgba(255, 255, 255, 0.5);
}
.right-border {
position: absolute;
top: 0;
left: 29px;
width: 3px;
height: 100%;
background: #0059dd;
}
.right-background {
position: absolute;
top: 0;
left: 32px;
width: 12px;
height: 100%;
background: rgba(255, 0, 255, 0.5);
}
.inactivee a {
display: none;
}
.inactivee .playButtone {
display: none;
}
.covere {
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;
}
.covere {
display: none;
}
.inactivee .covere {
display: block;
}
.covere::before,
.covere::after {
content: "";
position: absolute;
top: 0;
left: 86px;
width: 3px;
height: 100%;
background: #0059dd;
}
.covere::after {
left: 177px;
}
.nav {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
float: left;
}
.activee .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;
}
.activee {
background: url("https://i.imgur.com/dCneQvW.png") no-repeat -260px 0;
}
.playe,
.pausee {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 6px;
margin: auto;
}
.pausee {
left: 0;
}
.hide {
display: none;
}
According to the html
This comes first
.wrape {
position: relative;
width: 266px;
height: 174px;
margin-top: 8px;
overflow: hidden;
}
Then Cover:
.covere {
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;
}
Then these would come right before the 'a' anchor tag.
.nav {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
float: left;
}
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;
}
.left-background {
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 100%;
background: rgba(0, 255, 255, 0.5);
}
.left-border {
position: absolute;
top: 0;
left: 12px;
width: 3px;
height: 100%;
background: #0059dd;
}
.middle-background {
position: absolute;
top: 0;
left: 15px;
width: 14px;
height: 100%;
background: rgba(255, 255, 255, 0.5);
}
.right-border {
position: absolute;
top: 0;
left: 29px;
width: 3px;
height: 100%;
background: #0059dd;
}
.right-background {
position: absolute;
top: 0;
left: 32px;
width: 12px;
height: 100%;
background: rgba(255, 0, 255, 0.5);
}
Then these would come next? but I have no idea why.
.wrape.inactivee a {
display: none;
}
.wrape.inactivee .playButtone {
display: none;
}
Then these would come after that.
.activee .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;
}
.activee {
background: url("https://i.imgur.com/dCneQvW.png") no-repeat -260px 0;
}
.playe,
.pausee {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 6px;
margin: auto;
}
.pausee {
left: 0;
}
.hide {
display: none;
}

Answer 1

Both of those work and wont effect your code. However, the first one will keep you from getting lost in your code. Its always good to arrange your html the same as your CSS.