HTML5 and CSS3 All-in-One For Dummies
Book image
Explore Book Buy On Amazon

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.

image0.jpg

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.

image1.jpg

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:

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.

About This Article

This article is from the book:

About the book author:

Andy Harris taught himself programming because it was fun. Today he teaches computer science, game development, and web programming at the university level; is a technology consultant for the state of Indiana; has helped people with disabilities to form their own web development companies; and works with families who wish to teach computing at home.

This article can be found in the category: