Why Are Some of My CSS Rules Not Working

Why are some of my CSS rules not working?

CSS Commenting: Use /* ... */ not //... or <!-- ... -->

The problem you're having is not related to your flex code.

The problem is you're using line comment syntax for commenting out text, and this is not valid CSS.

button:ACTIVE { // feedback on touch modal
   background: aqua;
}

// next is for images
.img { width: 8vmin; }

So what you're actually doing is posting invalid code which, instead of commenting out the line, is calling CSS error-handling into play, which kills the next rule. In other words, any rule following your // text text text is ignored, just as if you had done this: xheight: 50px.

This is why order is not working for your icon:

// stuff living in #no
#info-div1 {
    order: 3;
    -webkit-order: 3;
}

Stick to the standard CSS commenting method. Start a comment with /*. End a comment with */.

/* stuff to be commented out */

Once you make the adjustments in your code, the order property works fine (and, as you might expect, other changes occur, caused by previously ignored code). See revised demo.

Read more about CSS comments here:

• 4. Syntax and basic data types > Section 4.1.9 Comments ~ W3C
• Is it bad practice to comment out single lines of CSS with //?
• Do double forward slashes direct IE to use specific css?
• Single Line Comments (//) in CSS ~ Tab Atkins, Jr., CSS Working Group

---

Lastly, on a separate note:

You're placing vendor prefixed code after the standard unprefixed versions.

#container {
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;

    justify-content: center;
    -webkit-justify-content: center;

    align-items: center;
    -webkit-align-items: center;

    align-content: space-between;
    -webkit-align-content: space-between;
}

You should consider reversing this. The unprefixed (W3C) version should go last, so it's always the preferred version in the cascade. Read more.

Why is my CSS style not being applied?

Have you tried forcing the selectors to be in the front of the class?

p span label.fancify {

    font-size: 1.5em;
    font-weight: 800;
    font-family: Consolas, "Segoe UI", Calibri, sans-serif;
    font-style: italic;
}

Usually it will add more weight to your CSS declaration.
My mistake ... There should be no space between the selector and the class.
The same goes for the ID. If you have for example:

<div id="first">
    <p id="myParagraph">Hello <span class="bolder">World</span></p>
</div>

You would style it like this:

div#first p#myParagraph {
     color : #ff0000;
}

Just to make a complete example using a class:

div#first p#myParagraph span.bolder{
    font-weight:900;
}

For more information about pseudo-selectors and child selectors : http://www.w3.org/TR/CSS2/selector.html

CSS is a whole science :) Beware that some browsers can have incompatibilities and will not show you the proper results. For more information check this site: http://www.caniuse.com/

Complete list of reasons why a css file might not be working

1. Are you sure the stylesheet is loaded? You can see it using the "Net" tab of Firebug on firefox, or on "Network" tab of the Console of your browser.

2. (If 1 works) can you have a simple sample style and see whether this is getting applied (and visible in the console)?

Why isn't my CSS rule being applied as expected?

It's all about specificity. .container-example > div is worth more than an individual class. In the specified file, or in your main CSS file, you will have to overwrite that with a value that's worth more. For example,

.container-example > div.override-overflow {
   overflow: auto;
}

is worth more than

.container-example > div {
   overflow: hidden;
}

Check CSS-Trick Guide for more information.

Some CSS rules are not applied from external link

Try putting just the code that is not running on the bottom of your CSS file. Sometimes, the code does get applied but then overwritten after your browser runs the rest of the CSS file. So your CSS file should look like this:

.input-span {
  display: inline-block;
  border: none;
  padding: 1px;
  outline: none;
  text-align: center;
  min-width: 100px;
  font-style: italic;
  border-bottom: 1px solid grey;
}

.input-span:focus {
  border-color: blue;
}

table.table {
  border-collapse: collapse;
}

table.table,
table.table th,
table.table td {
  border: 2px solid black;
}

.footer {
  margin-bottom: 50px;
}

@media print {
  .footer {
    page-break-before: always;
  }
}
*:not(small) {
  box-sizing: border-box;
  font-family: 'Palatino Linotype';
  font-size: 30px;
}

CSS changes are not getting reflected. Why?

I forgot to close a { in the CSS file.
That's why all the code didn't show up on the page.

Why is my CSS responsive rule not being applied?

Try below code, I provided the specific resolution, you can put according to your requirements.

@media (min-width:1366px) and (max-width:1920px){
                    //your css  
     }
                   
      @media (min-width:1024px) and (max-width:1365px){
    
                        //your css
      }
                   
    @media (min-width:320px) and (max-width:1023px){
        //your css
    }

Why are some print CSS rules not working?

CSS specificity could be overruling your print CSS rules. The simplest way to resolve this is to add !important to your rules. While generally this should be avoided, it's fine to use it in a print CSS.

.bar
{
    display: none !important;
}

The other way is to make sure your print CSS rules come out on top in the specificity calculation. The exact way to do this depends entirely on your regular CSS rules.

Some parts of external CSS are not loading

Since the css rules aren't showing up in the inspector, it's probably either caching, or you're editing the wrong file/not uploading the file after making changes.

Have you tried doing a hard-refresh using ctrl+shift+r or cmd+shift+r? The external css file might be cached by your browser. Maybe I'm stating the obvious, but it has happened to me more often than I'd like to admit.

---

Related Topics