-
200706 Feb
Posted in CSS3 Previews
Sometimes it’s difficult to figure out why we might need some aspects of CSS3. Like why would anyone ever need
:not()? After all, it’s like it works on elements we don’t care to style. Why would we need that?Well, at some point we’re bound to find ourselves styling a webpage with a lot of
id’s, and want to style them all the same style but they’re all differently named. Sure, we could add a lot of classes and bloat the code, or list off every singleidwhich could get messy in the CSS file.We could also think backwards, and use something like
div.section *:not([id])to apply style to everything in a specific area that doesn’t have an ID, so we could then easily apply default styling to the ID’s without having to name every single one. Since that sounds confusing, let’s look at a code sample—div.section {color: red;} div.section *:not([id]) {color: black;}So we simply applied a default font color (red), which is applied to everything including any
id’s in there. Then we restyle the elements we didn’t want to actually change the style of, so they look like the rest of the document or appear unchanged. It takes a little dyslexic thinking, but this would avoid code bloat in a situation where you’d normally have to add a lot ofclasses or list a lot of elements.Most modern browsers already support this. Only IE and Opera don’t.
You can skip to the end and leave a response.
-
Comments
-
01.
Grey says:Comment » February 7th, 2007 at 12:33 am
Wouldn’t the same be possible with a combination like this?
div.section { black; }
div.section *[id] { red; } -
02.
Yes, but my point was to show a new way of approaching problems. Like Perl programmers say, “there’s always more than one way to do it”.
-
03.
-
04.
:not is very useful. I can’t wait for it to be implemented, so that I may finally italicise foreign words.
http://blog.empyree.org/post/3082
*:not(lang|(en)) {font-style:italic}
This is far from perfect (no reverse, doesn’t work with multilingual site) but comes in handy for us typography lovers.
-
05.
Foreign words in italics…
Typography tells us foreign words shall be rendered as italic (here, we’re talking about real italics, not emphasis). The most common cases are, for me, Latin (Ultima ratio regum) or French (comme ceci) words. Ruling out span style or the marginally…
-
06.
By the way, if you happen to know a good :not testcase for lang, I am very interested.
-
07.
I think one of the most interesting use cases for :not is in things like menus. If you want a separator such as a ‘|’ between menu items then instead of using :first-child (or last-child) to remove the styling from the first (or last) item in the list, you can do something like the following:
.nav ul li:not(:first-child):before { content: '|'; }This has the advantage of only doing the styling once, only on elements that need it, instead of adding the styling and removing it from those that don’t, or adding class names or putting it in markup.
-
08.
Great example indeed. Maybe we should start a page about good uses of the new CSS3 values — starting with selectors, and particularly :not.
-
09.
:not is extremely useful, i use it a lot in jquery already
-
01.
