• 200706 Feb

    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 single id which 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 of classes 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


Advertise here?