Simplifying a code

Because you have not set them in there on that example, the colors were coming from the pseudos on the anchor.

.wrape li:nth-of-type(15) a::before,
.wrape li:nth-of-type(15) a::after {
  content: '';
  position: absolute;
  top: 0;
  width: 12px;
  height: 44px;
}

.wrape li:nth-of-type(15) a::before {
  left: 0;
  background: #00ffff;
}

.wrape li:nth-of-type(15) a::after {
  right: 0;
  background: #ff00ff;
}

Your lines are coming from pseudos on your new div

1 Like

Because you have not set them in there on that example.

How would I do that?

No, you are targeting the anchors in each ruleset.

You need to target the div for colors or lines, and then the anchor for colors or lines

You are working with four pseudos

What is all of this about anyway, to keep opacity from effecting your borders?

1 Like

I’m making 2 different groups.

1 that uses all borders as lines.

then the other

all that uses background as lines.

After this I’m done with both sets of codes.

I’m up to this

How do I do what you said to do?



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

.wrape li:nth-of-type(15) a::before,
.wrape li:nth-of-type(15) a::after {
  content: '';
  position: absolute;
  top: 0;
  width: 12px;
  height: 44px;
}

.wrape li:nth-of-type(15) a::before {
  left: 0;
  background: #00ffff;
}

.wrape li:nth-of-type(15) a::after {
  right: 0;
  background: #ff00ff;
}

li:nth-of-type(15) .linese  a::before,
li:nth-of-type(15) .linese a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

li:nth-of-type(15) .linese a::after {
  left: 29px;
}

I just turned the li into a class to make it case sensitive.

I didn’t think the li hanging out in the front, with no class in-front of it was a good idea.

li:nth-of-type(15) .lineseb

  <li class="linesea">
      <div class="lineseb">
        <a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"></a>
      </div>
    </li>

.linesea:nth-of-type(15) .lineseb a::before,
.linesea:nth-of-type(15) .lineseb a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.linesea:nth-of-type(15) .lineseb a::after {
  left: 29px;
}

You need to target the div for colors or lines, and then the anchor for colors or lines

I honestly don’t know how to do this.

After I’m able to do one of the colors, I’ll be able to do the others.

target the div
target the anchor

Just sit tight, no need to post anything else yet.

Give me a little time, I’m going to take a different approach with 4 pseudos.

I’ll post back when I get something put together.

2 Likes

technically it’s 5 I think.

 background: #ffffff;

 background: #00ffff;

 background: #ff00ff

left: 12px;

left: 29px;

Wait a second, the white doesn’t count as one,

as seen here:

There’s no issue with that appearing.

Try this…
I set the new class on the last list item and it takes the place of all the :nth-of-type(15) rules that were previously used. That change was made in the html too.

Then I targeted the nested div and anchor from li.linese

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}
.nave {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nave li {
  float: left;
}
.wrape 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;
}

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

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

.wrape li:nth-of-type(8) a {
  opacity: 0;
}
/*==== Center Lines ======*/
.wrape li.linese {
  float:left;
}
.wrape li.linese div {
  position:relative;
  float:left;
  background:#fff;
}
.wrape li.linese div::before,
.wrape li.linese div::after {
  content: "";
  position: absolute;
  top: 3px; left: 15px;
  width: 3px; height:44px;
  background:  #0059dd;
  cursor:pointer;
}
.wrape li.linese div::after {
  left: 32px;
}
/*===================================*/
.wrape li.linese a {
  position: relative;
  background:none;
  border: 3px solid #0059dd;
}
/*====== Left & Right Color Blocks =====*/
.wrape li.linese a::before,
.wrape li.linese a::after {
  content: '';
  position: absolute;
  top: 0;
  width: 12px;
  height: 44px;
}
.wrape li.linese a::before {
  left: 0;
  background: #00ffff;
}
.wrape li.linese a::after {
  right: 0;
  background: #ff00ff;
}
/*===================================*/

.inactivee .covere 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;
}



.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;
}

</style>
</head>

<body>

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

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


    <svg class="playe 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="pausee 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>


</body>
</html>

2 Likes

I’m looking at it now.
I’m going to need some time to study it.

It’s really overkill, it’s much easier just to set borders on the 2 pseudos that set the background colors. I showed you how to do that previously, but they inherit opacity.

Use at your own risk, as problems could arise if you make any other changes.

1 Like

I have no idea what you mean here, but your resulting code is incorrect:

.linesea:nth-of-type(15)

The nth-of-type selector targets the nth instance of a particular element; in this case, the <li> tag. You can’t remove the element from the rule.

I don’t think I will be using that code. That seems crazy to do.

What I did do is this to see if anyone would want to give it their best.


In the code, the lines are added using pseudo elements.
For some reason the colors won’t show through it.

Anyone want to give it try.

I want to do it without adding borders, this is a must.

It should look like this:

Instead it looks like this:

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

.wrap 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;
}

.wrap li a {
  position: relative;
  background: #ffffff;
  border: 3px solid #0059dd;
}

.wrap li a::before,
.wrap li a::after {
  content: '';
  position: absolute;
  top: 0;
  width: 12px;
  height: 44px;
}

.wrap li a::before {
  left: 0;
  background: #00ffff;
}

.wrap li a::after {
  right: 0;
  background: #ff00ff;
}

li .lines a::before,
li .lines a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

li .lines a::after {
  left: 29px;
}

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

<div class="wrap">
  <ul class="nav">

    <li>
      <div class="lines">
        <a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"></a>
      </div>
    </li>
  </ul>

All four of your pseudos end up targeting the anchor, the second set just overrides the first set.

.wrap li a::before,
.wrap li a::after

Gets overridden by…

li .lines a::before,
li .lines a::after

Here is a much simpler way using linear-gradients for your background

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.wrap {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}
.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav li {float:left;}

.nav li a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  border: 3px solid #0059dd;
}
.nav li.lines a { background:
    linear-gradient(to right,
    #00ffff, #00ffff 14px,       /*left block*/
    #0059dd 14px, #0059dd 17px,  /*3px border*/
    #fff 17px, #fff 33px,        /*center block*/
    #0059dd 33px, #0059dd 36px,  /*3px border*/
    #ff00ff 36px);               /*right block*/
}
</style>
</head>

<body>

<div class="wrap">
  <ul class="nav">
    <li class="lines">
        <a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"></a>
    </li>
  </ul>
</div>
</body>
</html>
2 Likes

I was really just trying to do it with just the code I have there, without anything extra added to it.

How would you prevent this from happening?

.wrap li a::before,
.wrap li a::after

Gets overridden by…


li .lines a::before,
li .lines a::after

Is it Groundhog day again!

The code I gave you in post #51 is how to do it with 4 pseudos.
2 of my pseudos were on the anchor, 2 were on the div.

You keep trying to put 4 pseudos on one anchor, it can’t be done, period.

You said you thought it was crazy, and I did too!
Besides that it’s going to cause you problems with stacking levels and opacity.

The code I just gave you above will solve those problems, I have revised it below with opacity set into rgba colors, Without effecting the borders.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.wrap {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat -260px 0;
}
.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav li {float:left;}

.nav li a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  border: 3px solid #0059dd;
}
.nav li.lines a { background:
    linear-gradient(to right,
    rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.5) 14px, /*left block*/
    #0059dd 14px, #0059dd 17px,  /*3px border*/
    rgba(255, 255, 255, 0.5) 17px, rgba(255, 255, 255, 0.5) 33px, /*center block*/
    #0059dd 33px, #0059dd 36px,  /*3px border*/
    rgba(255, 0, 255, 0.5) 36px); /*right block*/

    /*rules below to be removed, testing for bottom right corner*/
    position:relative;
    top:116px; left:208px;
}
</style>
</head>

<body>

<div class="wrap">
  <ul class="nav">
    <li class="lines">
        <a href="http://hi5.1980s.fm/played.html" target="_blank" title="Song History"></a>
    </li>
  </ul>
</div>
</body>
</html>
3 Likes

wow, I like that. I’m going to have to take a look at it. thanks.

1 Like