CSS :not is Awesome

Inheritance can be hell sometimes. Consider changing the opacity of an element. There is no way to "cancel out" of that opacity change on content inside.

Sometimes the only way to avoid creating inheritance problems is to specify what elements should not receive a set of rules.

Consider blurring content while a dimmer is present. Blurring should only apply to elements that are not inside the dimmer, but there is no way to know what the content is beforehand.

css :not to the rescue!

/* blur everything but the dimmer */
body > :not(.dimmer){
  -webkit-filter: blur(15px) grayscale(0.7);
  -moz-filter: blur(15px) grayscale(0.7);
}

For more CSS tips, visit Semantic UI CSS Guide