Styles not working as expected

HTML & CSS
1

How come .button div isn’t working, and how do I get it to work?

<style>
  .playButton {
    width: 606px;
    height: 50px;
    box-sizing: border-box;
    cursor: pointer;
    border: 3px solid #0059dd;
    background: linear-gradient( to right, transparent 0px, transparent 198px, #0059dd 198px, #0059dd 201px, transparent 201px, transparent 399px, #0059dd 399px, #0059dd 402px, transparent 402px);
  }
  
  .playButton.playing {
    background: linear-gradient(to right, #00ffff 0, #00ffff 198px, #0059dd 198px, #0059dd 201px, #ffffff 201px, #ffffff 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px);
  }
  
  .button div {
    width: 39px;
    height: 40px;
    margin: 2px 284px;
  }

</style>

<div class="playButton">


  <div class="button">

    <svg class="play" viewbox="5 8 50 56">
      <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
      <path fill="#0059dd" d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"></path>
      <path fill="#0059dd" d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z"></path>

    </svg>

    <svg class="pause" style="display:none;" viewbox="0 -3.4 24 24">
      <path d="M12.086,5.63 C10.705,5.63 9.586,6.748 9.586,8.13 C9.586,9.511 10.705,10.63 12.086,10.63 C13.467,10.63 14.586,9.511 14.586,8.13 C14.586,6.748 13.467,5.63 12.086,5.63"></path>
      <path d="M7.507,14.434 C7.135,14.183 6.787,13.896 6.472,13.58 C6.157,13.266 5.87,12.917 5.618,12.544 C5.367,12.174 5.15,11.775 4.972,11.356 C4.793,10.929 4.655,10.486 4.564,10.038 C4.47,9.579 4.422,9.105 4.422,8.63 C4.422,8.155 4.47,7.68 4.564,7.219 C4.655,6.772 4.793,6.329 4.972,5.905 C5.148,5.489 5.365,5.089 5.618,4.715 C5.868,4.344 6.155,3.996 6.472,3.68 C6.791,3.361 7.14,3.073 7.509,2.824 L8.625,4.485 C8.363,4.66 8.114,4.866 7.886,5.094 C7.66,5.32 7.454,5.57 7.275,5.834 C7.094,6.102 6.94,6.387 6.814,6.684 C6.687,6.986 6.589,7.301 6.524,7.619 C6.456,7.95 6.422,8.289 6.422,8.63 C6.422,8.97 6.456,9.309 6.524,9.638 C6.589,9.958 6.687,10.274 6.814,10.578 C6.941,10.874 7.095,11.159 7.274,11.423 C7.456,11.692 7.661,11.941 7.886,12.166 C8.111,12.392 8.361,12.597 8.627,12.777 L7.507,14.434"></path>
      <path d="M5.271,17.751 C4.688,17.357 4.14,16.905 3.643,16.408 C3.145,15.91 2.693,15.363 2.301,14.781 C1.903,14.193 1.562,13.564 1.286,12.912 C1.006,12.249 0.79,11.554 0.646,10.846 C0.497,10.121 0.422,9.376 0.422,8.63 C0.422,7.883 0.497,7.138 0.646,6.413 C0.791,5.704 1.006,5.009 1.287,4.347 C1.562,3.695 1.903,3.067 2.301,2.478 C2.696,1.894 3.147,1.347 3.643,0.851 C4.14,0.354 4.688,-0.098 5.271,-0.492 L6.39,1.166 C5.913,1.487 5.464,1.857 5.057,2.265 C4.651,2.671 4.281,3.119 3.958,3.598 C3.633,4.079 3.354,4.593 3.129,5.126 C2.9,5.667 2.723,6.234 2.605,6.815 C2.484,7.406 2.422,8.018 2.422,8.63 C2.422,9.241 2.484,9.853 2.605,10.445 C2.723,11.024 2.9,11.591 3.128,12.133 C3.354,12.666 3.633,13.18 3.958,13.662 C4.279,14.138 4.65,14.586 5.057,14.994 C5.464,15.402 5.913,15.772 6.39,16.093 L5.271,17.751"></path>
      <path d="M16.665,14.434 L15.545,12.777 C15.811,12.597 16.061,12.392 16.286,12.166 C16.511,11.941 16.716,11.692 16.897,11.425 C17.077,11.159 17.232,10.874 17.358,10.576 C17.485,10.274 17.583,9.958 17.648,9.64 C17.716,9.309 17.75,8.97 17.75,8.63 C17.75,8.289 17.716,7.95 17.648,7.621 C17.583,7.301 17.485,6.986 17.358,6.683 C17.232,6.387 17.078,6.102 16.897,5.834 C16.718,5.57 16.512,5.32 16.286,5.094 C16.058,4.866 15.809,4.66 15.547,4.485 L16.663,2.824 C17.032,3.073 17.381,3.361 17.7,3.68 C18.017,3.996 18.304,4.344 18.554,4.715 C18.807,5.089 19.025,5.489 19.2,5.904 C19.38,6.329 19.517,6.772 19.608,7.221 C19.702,7.68 19.75,8.155 19.75,8.63 C19.75,9.105 19.702,9.579 19.608,10.04 C19.517,10.486 19.38,10.929 19.2,11.354 C19.023,11.775 18.805,12.174 18.553,12.546 C18.302,12.917 18.015,13.266 17.7,13.58 C17.385,13.896 17.037,14.183 16.665,14.434"></path>
      <path d="M18.901,17.751 L17.782,16.093 C18.259,15.772 18.708,15.402 19.115,14.994 C19.523,14.586 19.893,14.138 20.214,13.662 C20.539,13.18 20.818,12.666 21.043,12.133 C21.273,11.591 21.449,11.024 21.568,10.445 C21.689,9.853 21.75,9.241 21.75,8.63 C21.75,8.018 21.689,7.406 21.568,6.814 C21.449,6.234 21.273,5.667 21.044,5.126 C20.818,4.593 20.539,4.079 20.214,3.597 C19.891,3.119 19.521,2.671 19.115,2.265 C18.708,1.857 18.259,1.487 17.782,1.166 L18.901,-0.492 C19.484,-0.098 20.032,0.354 20.529,0.851 C21.025,1.347 21.476,1.894 21.871,2.477 C22.269,3.067 22.61,3.695 22.886,4.347 C23.166,5.009 23.381,5.704 23.526,6.412 C23.675,7.138 23.75,7.883 23.75,8.63 C23.75,9.376 23.675,10.121 23.526,10.846 C23.382,11.554 23.166,12.249 22.885,12.912 C22.61,13.564 22.269,14.193 21.871,14.781 C21.479,15.363 21.027,15.91 20.529,16.408 C20.032,16.905 19.484,17.357 18.901,17.751"></path>
      <path d="M11.086,9.973 L13.086,9.973 L13.086,15.63 L11.086,15.63 L11.086,9.973 Z"></path>
    </svg>
  </div>

</div>

<audio id="player" preload="none" style="display:none;">
  <source src="http://hi5.1980s.fm/;" type="audio/mpeg">
</audio>



<script>
  (function iife() {
    function playButtonClickHandler() {
      var button = document.querySelector(".playButton");
      var player = document.querySelector("#player");
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton .pause").style.display = "inline-block";
        document.querySelector(".playButton .play").style.display = "none";
        player.play();
      } else {
        button.classList.remove("playing");
        document.querySelector(".playButton .play").style.display = "inline-block";
        document.querySelector(".playButton .pause").style.display = "none";
        player.pause();
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>
2

“Not working” in what sense? Please be more specific when describing a problem.

3

Both are same width, height, and margin.

Without button div added to the code.

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

Do you mean that the play button is not displaying at the size intended?

(You’ve been a member here long enough to know that you are more likely to get help if you explain your problem clearly at the outset, rather than expecting members to look at various JSFiddles and deduce the issue for themselves.)

1 Like
5

The style attributes aren’t working as expected.

Both svgs are the same width, height, margin.

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

So what do you expect? We’re not mind readers

7

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">

But not like this:


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

And I want to know why not.

8

Well, the style declaration is .button div which is for div elements inside of ones with the .button class, and your page has no such divs.

1 Like
9

How come it works here?

10

Because styles cascade. It’s the C of CSS. Cascading style sheets.

11

Here’s some useful introductory material about cascade and inheritance:

12

So, then it’s allowed in that instance?

13

Please clarify what you mean by “it”, and “that”.

1 Like
14

This isn’t a Cascading style sheet

This is:

And I don’t quite understand what the difference is.

15

What is the difference that makes you think that the second one is CSS and the first one isn’t?

16

On that linked code, what is the name of the HTML element that you want to apply the .button div style too?

17

svg, the other one is an svg also and it works.

18

With regard to the .button div style declaration, are there any div elements inside of the elements that have the .button class?

19

no… I do not think so.

20

Because there are no div elements inside of the .button elements, that explains why that .button div style declaration has no effect on anything.

1 Like