Properly setting Class selectors in CSS

HTML & CSS
1

Why is this the case? Can someone explain this to me so I understand how to properly set these.

Is that irrelevant what gets put next to a Class selector? I thought it’s supposed to mean something.

This Works

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

This Works

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

This Works
https://jsfiddle.net/r01rfu36/

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

This Works
https://jsfiddle.net/r01rfu36/1/

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

This Doesn’t Work
https://jsfiddle.net/r01rfu36/4/

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

<style>
  .playButton {
    width: 600px;
    height: 44px;
    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 {
    width: 39px;
    height: 40px;
    margin: 2px 284px;
  }

</style>

<div class="playButton">
<div class="button">
  <svg class="play" width="39" height="40" style="margin: 2px 284px;" 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;margin: 2px 284px;" width="39" height="40" 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() {
    "use strict";
    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 .play").style.display = "none";
            document.querySelector(".playButton .pause").style.display = "inline-block";
            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

Hi @asasass I think if you’re deliberately trying to break the browser’s CSS engine you will find a lot of inconsistency and unexpected results in how each browser deals with each edge case. Best not to go down that route I would say and try to learn instead of how things do not work, how things do actually work. Just my opinion…

2 Likes
3

If the code is faulty, shouldn’t the code not work at all?

4

Not necessarily. Many times browsers work around faulty code in unique ways

3 Likes
5

Would the correct syntax here be
.button svg


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

Does look okay to me… Does it work for you?

7

This looks okay to me too, how are you supposed to know if it’s incorrect?

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

The HTML and CSS code for web browsers widely varied during the browser wars with the purpose of trying to force people to stay with their web browser because pages that were designed for one web browser, wouldn’t properly display on any others.

Because of those browser wars, modern web browsers are fault-tolerant and will attempt to display everything, even if it makes no sense to the browser.

1 Like
9

Good question.

There are CSS lint tools such as CSS Lint that look at the CSS code in isolation, and warns you of any problems in there.

Figuring out if CSS is incorrect is more of an art form though. Because CSS is used to affect the design and presentation of the page, telling that something is right is similar to a painter asking, “Does this mountain look right to you?”

Reliable absolute things that you can be told, are when your CSS will result in more problems for you than other things.

In your case, .button svg is the correct solution for your page.

10

What I have noticed that seems common in the browsers I test with is the CSS will work up to the point it’s broken and ignore the rest of it.

The reason that selector seems to be working is because the <svg> has height, width, and style attributes applied to it. Change the CSS rules so that it’s different and I think you’ll find that it does not “work”.

Even if you were to fix it, as long as you have inline style attributes, they will have precedence which could lead you to believe the CSS rules are not “working”, which is a reason you should not use inline style attributes.

3 Likes
11

Which is the right syntax to use there then?

This is wrong then.

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

I have a choice between these two, which do I use?

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

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

/me flips a coin. Heads!!
It came up tails. Use the second.

But really, the button is semantically different from either the play or pause elements, so the button doesn’t belong in the same CSS declaration with them.

14

I would probably do it like

.button svg {
  margin: 2px 248px; 
} 
.....
<svg ... width="39px" height="40px" ...  >

i.e. the <svg> without the style=“…” but with height and width. It may be equivalent either way, but that is how I would do <img> and I think of SVG as an image.

15

If I were to convert the svgs to base64, then I could put buttton on here


<div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg==');">
    </div>
16

Why would you keep the width and height on the svg as opposed to putting it in the css?

17

It’s, either all or nothing, just checked, won’t work like that.

18

Wait, my bad. You’re right. it works like that too.

19

But he said:

button is semantically different from either the play or pause elements, so the button doesn’t belong in the same CSS declaration with them.

20

I have just one question about that though. Why restrict the size of it to a specific value, when SVG is designed to be viewable at any size?

Shouldn’t we allow its container to dictate its size instead?

2 Likes