Why Is My CSS Class Being Overwritten/Ignored

Why is my CSS class being overwritten/ignored?

You could add importance to it, like so:

.region-home-speakers div.content { background: none !important; }

However, it's not a great practice to do it like this. I would definitely change the CSS like BoltClock says to something like this:

#home-blocks-area .region-home-speakers div.content { background: none; }

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 are my CSS class settings overwritten?

When you import the 3rd party theme with @import "{{ site.theme }}"; this adds a stylesheet full of rules e.g.

#header nav ul li a {
    font-size: 14px;
    box-shadow: inset 0px 1px 0px rgb(255 255 255 / 30%), 0px 3px 7px rgb(0 0 0 / 70%);
    ...
}

When you try to apply your own rule to the same element, it will not have enough specificity to override the theme's rule (even though it is written later).

a.btn-github {
    font-size: 13px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
    ...
}

One solution is to increase the specificity of the selector in your rule:

#header nav ul li a.btn-github {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgb(0 0 0 / 75%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

Why css class being overridden?

CSS Class can't start with an integer, so try col1 instead.

Working example: http://jsfiddle.net/9X7kz/8/

Here's the full grammar if you are interested:

http://www.w3.org/TR/CSS21/grammar.html#scanner

And this is the specific rule spec:

http://www.w3.org/TR/CSS21/syndata.html#characters

In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646
characters U+00A0 and higher, plus the hyphen (-) and the underscore
(_); they cannot start with a digit, two hyphens, or a hyphen followed
by a digit. Identifiers can also contain escaped characters and any
ISO 10646 character as a numeric code (see next item). For instance,
the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

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.

Can I prevent a CSS style to be overwritten?

No, you can't.

You can use more specific selectors (or even inline CSS with the style attribute) so that they are less likely to be overridden accidentally.

You can use the (eugh) sledgehammer of !important so they will only be overridden by another !important rule.

There is no way to prevent them being overridden though.

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.

Why CSS rules are disabled

Because margin is overwritten in the @media (max-width) query and padding is overwritten in section#intro

---

Related Topics