CSS3 supports several new selectors with interesting new capabilities that you should become familiar with. You can use these new capabilities to enhance pages in even better ways than before.
Attribute selection
You can now apply a style to any element with a specific attribute value. For example, the input tag takes different forms, all determined by the type attribute. If you apply a single style to the input element, that style gets applied to many different kinds of elements: check boxes, text fields, and radio buttons. By using the new attribute syntax, you can apply a style to any input element:
input[type="text"]{
background-color: #CCCCFF;
}
You can apply the style with or without a tag type, but it is possible to have unexpected side effects if you choose an extremely common attribute.
not
There are times you want an inverse selection. For example, imagine you wanted to apply a style to all the paragraphs that are not members of the special class:
p:not(.special) {
border: 1px solid red;
}
nth-child
The nth-child selector allows you to select one or more elements in a group. The basic version uses a numeric input:
#myList>li:nth-child(1){
border: 1px solid blue;
}
This allows you to apply a style to the first of a group of elements. In the example, there is a list with four items. The style is applied to the list items, not the list.
The numeric value can actually be a formula, like an+b. If you love algebra (and who doesn't?), you can select all the even-numbered elements like this:
#myList>li:nth-child(2n){
border: 1px solid blue;
}
A similar formula can be used to pick the odd-numbered children.
#myList>li:nth-child(2n+1){
border: 1px solid blue;
}
You could use this formula system to get all kinds of groupings, but most people simply need a particular element, or all the even or odd rows. CSS3 supplies shortcut keywords, even and odd, so you don't have to do it using math:
#myList>li:nth-child(even){
color: white;
background-color: red;
}
The keyword allows you to pick the last element from a group. There are a few more variations of this selection technique:
:nth-last-child(N): Works just like nth-child, except counts from the end of the group of elements rather than the beginning.
:nth-of-type(N): This selector works just like nth-child , except it filters to a specific type and ignores any elements that are not of exactly the same type of element.
last-child: This (naturally enough) selects the last child element.
last-nth-of-type(N): Works like nth-of-type, but from the end of the group.
first-child: Grabs the first element (technically this was available in CSS2, but it was rarely used).
These selection tools are fully-supported in all the recent browsers. However, as they are generally used simply to improve readability, it should be safe to use them. Older browsers simply skip the style.
Other new pseudo-classes
Pseudo-classes allow you to specify styles based on the state of an element. Modern CSS supports a number of new pseudo-classes:
:hover: The :hover pseudo-class has been a part of CSS from the beginning, but it was officially defined only for the tag. Now the :hover pseudo-class can be applied to any element. If the mouse is over an element, that element has the state activated. Note that mobile devices don't always support because the position of the pointing device isn't known until the item is activated.
:focus: The :focus pseudo-class is activated when an element is ready to receive keyboard input.
:active: A form element is active when it is currently being used: for example, when a button has been pressed but not yet released. Mobile devices often skip directly to active mode without going through hover mode. This can be an important design consideration when using state for styling.
The state pseudo-classes are fully supported by all modern browsers except the IE family of browsers. There is limited but buggy support in even early versions of IE.
