You may be thinking that it's a bit early to be thinking about CSS 3. After all, it's not yet a recognized standard, and in fact there are only a few documents in a public state about this new level. But even so, Mozilla and Firefox have begun implementint the CSS selectors (the furthest along module in CSS 3) so that Web designers can use them. If you start learning the CSS 3 selectors now, you'll be ahead of the curve when other browsers begin supporting them.
CSS 3 Attribute Selectors
CSS 2 allowed Web designers to begin selecting on the contents of attributes, but you could only match on complete strings in the attribute. With CSS 3, we can now select on partial matches of strings in the attributes. This gives us more flexibility. There are three new attribute selectors:
Beginning of the Attribute
This selector will select on exact matches of the beginning of the attribute string.
a[href^="ftp:"] { ... }Would match only ftp links on a page.
End of the Attribute
This selector will select on exact matches at the end of the attribute string.
a[href$=".edu"] { ... }Would match only links that point to .edu sites.
Any sub-string of the Attribute
This selector will match any attribute that has the sub-string within it.
img[src*="photos"] { ... }Would match every image that has photos in the src attribute. For example "/images/photos/image1.gif" and "/photos/image2.gif" and "photos.gif".
CSS 3 Pseudo-Classes
There are several new pseudo-classes added in CSS 3 that work in Firefox and Mozilla.
- The :root pseudo-class represents the root element of the document (in HTML 4 this is <html>). So designers working with XML can apply styles to the entire document without knowing exactly what the root element is.
:root { ... }
- The :last-child pseudo-class is similar to the :first-child pseudo-class in CSS 2, but refers to the last child element.
p:last-child { ... }
- The :target pseudo-class is useful to call attention to the text that is targetted when an anchor tag is clicked.
:target { ... }
- The :not pseudo-class allows you to select on elements that are not represented by the argument. Be careful with this one, as the html and body tags are elements as well, and often will match unless you are very specific. For example, this style will highlight all images without an alt tag:
img:not([alt]) { border: thick solid yellow; }
CSS 3 General Sibling Combinator
This selector allows you to select an element that has a specific sibling in common, but they do not have to be directly next to one another in the document. However the first element in the property must come first in the document. For example, to select all blockquotes following an h3 element you would write:
h3 ~ blockquote
This would match all blockquotes following an <h3> element regardless of what elements were in-between.
Other CSS 3 Selectors
There are a lot more new CSS 3 selectors, but they are not supported by browsers so far. When they are, they will add functionality to forms (like for highlighting checked items, disabled items, and form elements that haven't been touched by the reader), add the ability to select elements where they are the only child of the parent or when they have no children, or if you want to select every other table row, the nth-child selector will allow you to alternate which rows are selected.
CSS 3 selectors are exciting, and they will provide a lot of uses for Web designers. Sure, it gets more complicated, but the more specific we can get in defining our styles the better our pages will look and the more consistent our styles will get.
