Simplifying a code

HTML & CSS
21

Look at the html then look at the css!

You can clearly see that the linese class is in the wrong place on the css selector.

This is very basic css and something you should spot on your own:)

2 Likes
22

I’m still not able to spot it.

I don’t get it.

The CSS is good, the html needs to be adjusted then, right?

Nothing looks out of the ordinary to me.

What am I not seeing.

What am I failing to notice?

I still don’t get it.

23

I don’t get it.

.linese li:nth-of-type(15) a::before,

li:nth-of-type(15) .linese a::before,

.wrape .linese li:nth-of-type(15) a::before,

I have no idea what I’m supposed to be doing here.

24

I can’t.

25

This comes up in every one of your threads. Time and time again we’ve tried to get you set your players aside and learn about how css selectors work.

The subject is in just about everyone of your threads.

Several posts here

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

That descendant selector is searching for the 15th list-item inside of a div named .linese
You have no such mark up in your html

Look at your html, you have a div named .linese inside of an li

That selector above is backwards

1 Like
26

It has nothing to do with the audio players.

There:

The javascript is removed:

27

backwards, what do you mean?

28

What do you mean, wrong selectors were the problem you were having then too.

See my edits above

1 Like
29

I still don’t get it.

I don’t understand what you mean by, That selector above is backwards.

I’m not seeing what you’re seeing.

30

.linese a::after li:nth-of-type(15) {

31

Thank you for noticing the selector is backwards, but I still don’t understand what you’re referring to.

32

You must learn to crawl before you can walk, by that I mean you have ignored teaching yourself basic CSS and have tried to jump into advanced CSS.

Write a descendant selector for this html below that turns the text inside the span green

`

The span in this sentence should have green text

`

EDIT: I’ll even give you a hint and write it backwards showing how it does NOT work

span p .foo {color:green}

2 Likes
33

Here:


.foo p span {
  color: green;
}
1 Like
34

I don’t understand how that translates to this.

What’s backwards?

35

How are those selectors nested in the HTML? If one or the other is not the same nesting it likely won’t be what you expect of it.

1 Like
36 
<li>
    <div class="linese">
        <a href="#">Text</a>
    </div>
</li>

li .linese a {color:green}

That is how you would target the a in .linese

You had this…
.linese li

which is backwards, it was looking for a list-item inside a div

37

This doesn’t look correct.

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

li:nth-of-type(15) .linese a::after {
  left: 20px;
}
1 Like
38

Now space your lines out correctly, they are sitting on top each other because they both have left:20px

2 Likes
39

The colors are all gone.

40

The colors are still missing from it.

The lines are now set.