Styles not working as expected

HTML & CSS
21

It’s not on here either, but it works.

22

Really? I don’t see any .button div style declarations on that page either.

23

Getting back to the .button div dilemma.

What is it that you want to apply the style to instead?

24

oh… ur right…

1 Like
25

Button div works here, explain that?

26

Sure thing.

The style declaration is:

.button2 div {
  ...
}

And the button is:

<div class="button2">
  <div class="play" ...>

Can you see why the style is applied to the div there?

27

They are both classes.

28

By they, do you mean each of these style declarations from different pages?

  • .button div { … }
  • .button2 div { … }
29

I was referring to this:

<div class="button2">
  <div class="play" ...>
30

It still doesn’t work when I remove div.

31

Yes, that’s right.

The .button2 div style declaration will happen to every div element inside of the elements called .button2, no matter what class name those divs have.

32

It sounds like you need some learning material about this. I’m sure that there are some people around here that can supply a few good webpages that can help to teach you more about how CSS style declarations work.

33

It applied the style declaration to the svg elements, so that means that it works for me.

34 

  .button div {
    width: 39px;
    height: 40px;
    margin: 2px 284px;
  }
35

If the CSS needs further refinement, then I step back for my fellow experts here to provide you with further assistance.

36

vs: how it should look:

It works like this:

  <svg class="play" width="39" height="40" style="margin: 2px 284px;" viewbox="5 8 50 56">

  <svg class="pause" style="display:none;margin: 2px 284px;" width="39" height="40" viewbox="0 -3.4 24 24">
37

I believe I’ve already suggested http://www.htmldog.com/guides/css/ as a good starting point.

2 Likes
38

Ahh, so Nesting is the correct terminology to use when it comes to .button div

39

If you look at the code which works, you have inline styles applied to your svg with class “play”. On the “broken” code, you’ve added an extra <div class="button"></div> around your svgs and applied the styles to that, but you need to add the width and height rules for .play, too.

40

This worked, but why?

  .button .play, .pause{
    width: 39px;
    height: 40px;
    margin: 2px 284px;
  }