Not applying CSS class?

Question

Seems my CSS class defined in the head of the document isn't being recognized or applied. Any idea what I'm missing, or doing wrong?

JS Fiddle

<html>
  <head>
      <title>EXAMPLE</title>
      <style>
          .show_x
          {
              visibility: visible;
          }
          //
          .hide_x
          {
              visibility: hidden;
          }
      </style>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
        <span class="hide_x glyphicon glyphicon-warning-sign text-danger"></span>
        <span class="glyphicon glyphicon-warning-sign text-danger" style="visibility: hidden;"></span>
    </body>
</html>

I would expect to see neither warning sign, but I see the first one. The second one is properly hidden.

you have two closing </head> tags, I'd start with addressing that first and see if it helps. I'm assuming there is a single </html> closing tag that isn't shown in your sample. — user4759415
– user4759415, Commented Dec 19, 2018 at 19:03
Why is there a "//". When I remove it in the debugger, the css works as expected. — Kamil Jarosz
– Kamil Jarosz, Commented Dec 19, 2018 at 19:05

ArtisticPhoenix · Accepted Answer · 2018-12-19 19:04:51Z

4

Inline comments do not work in CSS, so where you have

      .show_x
      {
          visibility: visible;
      }
      // <-- invalid CSS
      .hide_x
      {
          visibility: hidden;
      }

Which probably makes the browser stop processing that CSS block, conveniently right before the more visible of the two (or less visible) ... anyway the one that's easier to see when it's applied as it hides stuff ... you get what I mean.

In CSS we can use only block comments /**/, it's a simple mistake.

answered Dec 19, 2018 at 19:04

ArtisticPhoenix

21.7k2 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

I_Al-thamary · Accepted Answer · 2018-12-19 19:23:18Z

<html>
  <head>
      <title>EXAMPLE</title>
      <style>
          .show_x
          {
              visibility: visible;
          }
        
          .hide_x
          {
              visibility: hidden;
          }
      </style>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
        <span class="hide_x glyphicon glyphicon-warning-sign text-danger"></span>
        <span class="glyphicon glyphicon-warning-sign text-danger" style="visibility: hidden;"></span>
    </body>
</html>

Collectives™ on Stack Overflow

Not applying CSS class?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related