CSS-Plus
CSS-Plus
Play with web technologies

Basic CSS Selectors you're missing out on

August 19, 2010
Attention: This article is old and the content is outdated. I've left the article here for historical purposes.
Basic CSS Selectors you're missing out on

This article isn't about CSS selectors that you should be using and you don't know it yet... It's about CSS selectors you might not know about because 1 or 2 popular browsers don't support them.

Basic CSS selectors are extremely useful... Unfortunately they are not well supported cross-browser. When I say "not well supported", I'm not even referring to CSS3 selectors.

CSS 2.1 is not properly supported by IE 6 or 7. Due to this issue, we are forced to stay away from these selectors almost as much as we 'avoid' CSS3.

Properties we can't wait to use

There are entire basic properties we have to stay away from - Such as outline which basically functions as a border to border - let alone values we can't rely on (I was planning on mentioning them, but there are just too many). There is so much we could do with these properties and/or values. As I've noticed, a lot of us do use some of these 'unsupported' properties - Such as CSS3 properties like box-shadow, border-radius, text-shadow, etc. but we use this as progressive enhancement.

Selectors we dream about

CSS selectors can't really be used as progressive enhancement. Selectors are not used without properties. Therefore the properties declared would also be considered as progressive enhancement whether or not they are supported by the browser. For example:

/* This #example-1 example is a common of progressive enhancement. The layout does not change */
#example-1 {
    border-radius: 5px;
}

/* This selector affects the first <img> sibling element that follows #example-2 */
#example-2 + img {
    border: 3px solid #fff;
    float: left;
    margin: 5px;
}

In the example above, #example-1 will progressively enhance the element, whereas #example-2 has completely changed the layout.

This is the reason unsupported CSS selectors have to be avoided more than CSS3 properties. It's quite amusing how we've had these powerful CSS selectors within grasp for years now, yet we use them less than we use the latest properties.

This is not to say that you can't use selectors and common properties as progressive enhancement. For example:

li:nth-child(2n) {
    background: red;
}

Yes yes, I know this is not a pseudo-class, but it acts as a selector. This will create the even/odd background effect which will only be seen on browsers that support this CSS3 selector. Unsupported selectors can be used as progressive enhancement, depending on the properties used within them.

Pseudo classes are boring

Pseudo classes are the new in thing, but I'm really into the basic, unused selectors, such as:

/* Selects the first <ul> sibling element to follow a <p> element */
p + ul {
    background: red;
}

/* Selects elements that have both classes 'foo' and 'bar' such as <div class="foo bar"></div> */
.foo.bar {
    background: red;
}

/* Selects input elements that have the attribute 'type="submit"' */
input[type="submit"] {
    background: red;
}

/* Selects <a> links that are child elements of <li> elements */
li > a {
    background: red;
}

IE6 doesn't support any of those, whereas IE7 support all except for p + ul - And because of this I've started using them more and more often.