Why Are My CSS Properties Being Overridden/Ignored

Why are my CSS properties being overridden/ignored?

Elements id have the priority in CSS since they are the most specific.
You just have to use the id:

#content li.post-item > * {
  margin: 0px;
}

#content .item-description {
  color: #FFF;
}

#content .item-meta {
  color: #666;
}

Basically id have the priority on class which the priority on tags(p,li,ul, h1...). To override the rule, just make sure you have the priority ;)

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.

CSS Override Being Ignored

You are defining the body as a class with the dot, try and remove it, that might be why it dosen't override

How to stop my css declaration from being overridden

Increase the specificity of rule C above that of rules A and B. Normally I would include some explanation here, but the one over at the linked site is superb.

Media Query Styles Not Overriding Original Styles

The selectors in your original CSS have the same specificity as the selectors within your media queries (the first declarations are also targeting the same property - width) and because the media query rule set is being overridden I'm going to assume that it appears before the original rule set.

The second media query selector works because it's targeting a property that wasn't set in your original CSS, so specificity isn't relevant.

To have the first media query selector take precedence, prepend an ancestor element to it:

@media screen and (max-width:1024px) {
    body #global-wrapper-outer > #global-wrapper-inner {
         width: 100%;
    }
    #global-wrapper-outer > #global-wrapper-inner > nav {
        display: none;
    }
}

h1 properties being overridden

Your css code is in the wrong order - as your style is before the other style (yours is on line 17 and the other styles are on line 70 and 77), the second lot will override the first lot. Put your style after the h1 style on line 77 in the site.css and yours will take precedence.

This is a good article about css precedence and specificity - in your case, see the cascade section (point 4):

If two rules are equal, the one declared last wins. CSS embedded in the html always come after external stylesheets regardless of the order in the html

Particular css class being ignored

Ok, so this came back in a big way – there was much griping about my perceived failure to pull changes from git, because my colleague's styling changes appeared to be overwritten when I pushed changes to the server. I found that his changes were actually present in the compiled css: they were simply ignored by the browser. I still found nothing amiss in the css – no hidden characters, nothing.

But in this case there were differences in how the scss was written, and also in how we compiled. Specifically, he uses linebreaks weirdly, which shouldn't affect the output, but did. He also uses Coda, by the way, so this makes no sense at all. But the "solution" turned out to be changing the sass output style to "compressed", which is annoying in development, and shouldn't be necessary, as the compiled css was fine all along, but it made the problem go away, and hopefully, this is the end of it.

How to override !important?

Overriding the !important modifier

1. Simply add another CSS rule with !important, and give the selector a higher specificity (adding an additional tag, id or class to the selector)
2. add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).

Some examples with a higher specificity (first is highest/overrides, third is lowest):

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

Or add the same selector after the existing one:

td {height: 50px !important;}

Disclaimer:

It's almost never a good idea to use !important. This is bad engineering by the creators of the WordPress template. In viral fashion, it forces users of the template to add their own !important modifiers to override it, and it limits the options for overriding it via JavaScript.

But, it's useful to know how to override it, if you sometimes have to.

---

Related Topics