CSS selectors

[asasass]

I’m just using this as an example here.

Edit fiddle - JSFiddle - Code Playground

This rule-set here:
a:nth-of-type(1)

Works on the div classes, but, it’s not required, or is unnecessary, or is way over doing it, right?

<a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History">
  <div class="content">
    <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>
  </div>
</a>

Added:

Edit fiddle - JSFiddle - Code Playground

.nav a:nth-of-type(1) {
  border: none;
  background: none;
}

.nav a:nth-of-type(1) .content {
  position: relative;
  height: 50px;
  width: 50px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

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

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

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

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

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

Removed:
https://jsfiddle.net/nvsf1hzw/23/

.nav .content {
  position: relative;
  height: 50px;
  width: 50px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.nav .left-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 44px;
  background: rgba(0, 255, 255, 0.5);
}

.nav .left-border {
  position: absolute;
  top: 0;
  left: 12px;
  width: 3px;
  height: 44px;
  background: #0059dd;
}

.nav .middle-background {
  position: absolute;
  top: 0;
  left: 15px;
  width: 14px;
  height: 44px;
  background: rgba(255, 255, 255, 0.5);
}

.nav .right-border {
  position: absolute;
  top: 0;
  left: 29px;
  width: 3px;
  height: 44px;
  background: #0059dd;
}

.nav .right-background {
  position: absolute;
  top: 0;
  left: 32px;
  width: 12px;
  height: 44px;
  background: rgba(255, 0, 255, 0.5);
}

[TechnoBear]

Don’t make your CSS rules any more complex than they need to be. The shorter the selector, the better.

.nav .content
.nav .left-background
.nav .left-border

Unless you also have instances of the classes .content, .left-background and .left-border which occur elsewhere on the page, you can omit the .nav from each of those selectors.

Why are you still using those unnecessary divs? You know it’s bad practice, so why continue with it?

[asasass]

This one is unnecessary because it works without it.

<div class="content">
</div>

I was just asking a general question.

This can be done a whole bunch of different ways.