Selecting unthemed HTML descendant elements using CSS :not()

In my recent work, I’ve been constructing a CSS framework that needs to support multiple themes: the ability to override many aspects of display formatting by applying a CSS class to a parent element, affecting all descendants. However, in order to make this work properly in actual practice, it’s may be desirable to apply default theming rules to even children without an ancestor theme-tagged element. (In my situation, this requirement applies because the mentioned CSS framework will be used to support microsites, which should be presented with a “good” look and feel even if the implementation of the site has been somewhat sloppy.)

The CSS :not() selector works well for this, as implemented in CSS3:

:not([class*=Theme]) * {
  // Sample selecting all unthemed elements, where themes are applied with *Theme class names on ancestors
}

This can easily, of course, be applied with different descendant selectors. Try the example.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s