CODEWITHSUNDEEP
cssless
cnak2
cnak2

Reputation: 1841

Make each span element farther from rest, except one

I want to be able to write a style in less, where I can apply it to 4 span tags. I want each span to have all the same properties, but I want to have be 30px; of space between each one. An finally, I want the 2nd span to have a different distance from the right than all the others.

Is there a way to do this, or do you need to write a separate style for span 2?

So here is my style for each span, which works fine. But there must be a better way with less...??

.right-lines {
  z-index:100; 
  display:block; 
  position:absolute; 
  width:80px; 
  height:2px; 
  background-color:#fff; 
  right:-80px; 
  margin:40px;
  top:140px;
}

.right-lines2 {
  z-index:100; 
  display:block; 
  position:absolute; 
  width:80px; 
  height:2px; 
  background-color:#fff; 
  right:-50px; 
  margin:40px;
  top:180px;
}

.right-lines3 {
  z-index:100; 
  display:block; 
  position:absolute; 
  width:80px; 
  height:2px; 
  background-color:#fff; 
  right:-80px; 
  margin:40px;
  top:220px;
}

.right-lines4 {
  z-index:100; 
  display:block; 
  position:absolute; 
  width:80px; 
  height:2px; 
  background-color:#fff; 
  right:-80px; 
  margin:40px;
  top:260px;
}

Upvotes: 0

Views: 29

Answers (2)

JasonB
JasonB

Reputation: 6378

If you want the lines to be 30px from one another, use 30px of margin. There is no need for so much absolute positioning. This also allows for fewer specific styles.

body {
  background: black;
}

.right-lines {
  position: absolute;
  top: 140px;
  right: 0;
  z-index: 100;
  font-size: 0;
  text-align: right;
}

.right-lines span {
  display: block;
  width: 80px;
  height: 2px;
  background-color: #fff;
  margin: 0 80px 30px auto;
 }

.right-lines span:nth-of-type(2) {
  margin-right: 50px;
}

.right-lines span:last-child {
  margin-bottom: 0;
}
<div class="right-lines">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Upvotes: 2

Ron Norris
Ron Norris

Reputation: 2690

Try making a common class or use the span tag itself to style the common features. You can, of course get even more efficient with other class stylings. And a sample span tag might look like <span class="span_class right-lines">...</span>

/* common styles */
.span_class {
    z-index:100; 
    display:block; 
    position:absolute; 
    width:80px; 
    height:2px; 
    background-color:#fff;
    margin:40px;
}

/* And now make the special ones */
.right-lines {
    right:-50px;
    top:180px;
}

.right-lines2 {
    right:-50px; 
    top:180px;
}

.right-lines3 {
    right:-80px; 
    top:220px;
}

.right-lines4 {
    right:-80px; 
    top:260px;
}

Upvotes: 0

Related Questions