Overriding Properties in CSS

Overriding properties in CSS

Because id+selector (#iddiv span) is more specific than a class. Either

#iddiv span.myclass

#iddiv .myclass

should work for this case.

Learn more about CSS specificity here or by Googling it.

CSS class override property behaviour

It's the latter. Cascade resolution is on a per-property basis. If the color property exists somewhere with higher precedence (in this case, the internal stylesheet), then that property is cascaded to the more precedent one. The rest of the properties carry over because no more precedent declarations exist.

Interestingly, the CSS2.1 spec seems to conflate "style rules" and style declarations, in section 6.4. This may be a source of confusion. The subsection 6.4.1 clarifies this by referring only to property declarations.

Overriding CSS properties for a specific html element

That's a CSS specificity issue.

.main_section article has a higher specificity value than .special-bg selector.

In terms of value:
Inline Style > IDs > Classes, Attributes, and Pseudo-classes > Element Types and Pseudo-elements, So the calculation of Specificity of these two CSS selectors would be:

.special-bg

Inline Style    ID   (Pseudo-)Class    (Pseudo-)Element
0               0    1                 0

.main_section article

Inline Style    ID   (Pseudo-)Class    (Pseudo-)Element
0               0    1                 1

11 > 10 => .main_section article selector wins!

You could use the following:

.main_section .special-bg {
  /* Styles goes here... */
}

Overriding CSS property all: unset

It does not appear to be possible to undo the effects of the all property once it has been specified. This may be due to all being a shorthand property (that happens to accept only the CSS-wide keywords as values).

You can't erase a shorthand declaration from the cascade the same way that css-cascade-4's introduction of the revert keyword allows you to erase author-level declarations, and that's because a shorthand property doesn't exist as its own entity in the cascade; instead, it simply represents all of its component properties. Like with the more traditional shorthand properties such as background and font, the only way to override a shorthand declaration that has been applied is to re-specify the values for the longhands that were overridden, either via longhand declarations or via another shorthand declaration. But you can't do the latter with the all property since it only accepts CSS-wide keywords.

As the former is obviously not practical with the all shorthand, since you can't predict which author-level declarations are being overridden to begin with, your only other option is to restrict it via a selector, thereby preventing it from ever applying in specific circumstances in the first place. Hopefully we will see more implementations of level 4 :not() in the near future, which will make writing selectors a little easier.

Can I reset a CSS property rather than overriding it?

To answer your question (rather than solving your problem)...

Can I reset a CSS property rather than overriding it?

Reset to what?

The C in CSS stands for cascading and you'll always have several layers of styles combining among themselves with precisely defined though not always immediately clear rules. Apart from the styles set by the site author in different places (external CSS files, <style> blocks, style="" attributes...), in the base line we'll find the builtin browser styles and as far as I know browser vendors are free to assign whatever default styles they choose—and often users can add their own styles to the soup, either with builtin settings or with add-ons. Even the so called CSS resets don't actually reset anything. They merely add yet another layer of styles on top of the rest.

There's no syntax for "Create a snapshot here" (which would be the only solution I can think of without a thorough analysis) so the answer is basically no.

Overriding Properties in CSS