We all love CSS it’s fundamental to the web. However most of us do not use the full power of CSS. A quick rummage around the W3C specification and you will see how powerful CSS can really be. I’m talking about the CSS selector, sure we all use the basic selectors, but what about the more complicated ones.

Well here’s my guide to the most useful not very used CSS selectors (as well as what they are currently supported in).

CSS2

Pattern	Meaning	IE6	IE7	FF	SF	OP
E > F	Matches any F element that is a child of an element E.
E:first-child	Matches element E when E is the first child of its parent.
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).
E:active E:hover E:focus	Matches E during certain user actions.
E + F	Matches any F element immediately preceded by an element E.
E[foo]	Matches any E element with the “foo” attribute set (whatever the value).
E[foo="warning"]	Matches any E element whose “foo” attribute value is exactly equal to “warning”.
E[foo~="warning"]	Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”.

CSS3

Pattern	Meaning	IE6	IE7	FF	SF	OP
E ~ F	Matches any F element preceded by an element E.
E:empty	Matches element E where E has no children, including text nodes

If you need a detailed walkthrough on how these selectors work, please refer to the W3C Specification on CSS3 Selectors (which includes all the CSS2 selectors).

A Couple of Examples

I couldn’t just give all these CSS selectors without giving you some great examples of how they can be used.

E:first-child/E:last-child – You have a ul list of elements which you float horizontally. With first child and last child you can easily set the margins for the first and last child different from the remaining items:

ul { list-style: none; margin: 0px; padding: 0px; }
ul li { float: left; margin: 0px 10px; }
ul li:first-child { margin: 0px 10px 0px 0px; }
ul li:last-child { margin: 0px 0px 0px 10px; }

E:empty – You may have a situation where you have an empty paragraph. Paragraphs will always have a margin top and a margin bottom, which could look unsightly. So lets remove it.

p:empty { display:none; }

What’s your favourite selector? Do you care that they are not always supported?

I’ve just had this crazy idea, what would happen if all the <div> tags in the world were converted into <d> tags. Image how much space it would save, well you don’t need to imagine I have broken out my calculator and worked it all out.

(more…)

There is a very little used and unknown method which allows you to utilise JavaScript within a CSS file. The CSS Expression property allows you to assign a JavaScript expression to a CSS property. For example, this allows you to set the position of an element according to the browser size.

[code="css"]
width:expression(document.body.clientWidth > 950 ? "950px": "100%" );
[/code]

Do not use CSS Expression, they are unreliable, slow and are only supported in IE!

CSS Expression suddenly came to me as a solution for the currently much debated feature (here and here) of variables in CSS3. This could theoretically be currently achieved through the use of CSS Expressions.

[code="css"]
function blue() {
return 'blue';
}

body { background: expression(blue()); }
[/code]

CSS Expressions are horrible and unsupported, so please don’t use them in development. They do, however, highlight a interesting and little known feature of CSS.

This is quite a well known but under used technique for highlighting your form elements without any JavaScript. By using the CSS property focus you can apply style to a form element when it is clicked, also know as focus.

Example:

The HTML

The HTML is really simple all you need is a input box:

[code="html"]

The CSS

The CSS can be approached by one of two ways you could either apply a class name to any form element which is applicable.

[code="css"]
input:focus.yourclassname { background-color: red; }
[/code]

Or you can use the CSS selectors to highlight every form like this.

[code="css"]
input[type="text"]:focus { background-color: red; }
[/code]

The focus selector only works in the modern browsers, and not IE7 and below. If you want this to be compatible with IE6 use this JavaScript, along with prototype

[code="javascript"]
$$('input[type="text"]').each(function(element)) {
Event.observe(element, 'click', function() {
element.toggleClassName('yourclassname');
});
});
[/code]