Web Development

CSS 101: Decide what to style with selectors

Get more information about the many nuances of the CSS standard by learning about adjacent sibling and attribute selectors, as well as pseudo-classes and pseudo-elements.

A CSS selector is made up of a pattern that is matched against all elements in the document tree. Its CSS rule is applied to all elements that match the pattern. Last week I began an overview of the various types of CSS selectors. This week I discuss adjacent sibling and attribute selectors, as well as pseudo-classes and pseudo-elements.

Adjacent sibling selectors

Adjacent sibling selectors let you select the sibling immediately following an element. This allows you to select and style elements only if they immediately follow a specific element. The syntax for these selectors is the sibling elements separated by the plus sign (+).

Weekly development tips in your inbox
Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.
Automatically sign up today!

For instance, you may want to style paragraphs that follow certain header elements differently than other paragraphs. The example in Listing A demonstrates this by selecting paragraph elements that immediately follow h1 elements. Also, the example demonstrates that siblings may be specified as more than two elements as the second paragraph is selected as the second paragraph to follow an h1 element, and its font color is set to green.

Working with elements and their children or siblings is a great option, but you may wish to style elements via property values.

Attribute selectors

An element's attributes are used when working with attribute selectors. That is, the presence of an attribute or the attribute having a certain value assigned to it may be used as a determining factor for applying a certain CSS style. There are four ways to apply attribute selectors:

  • [attribute]: A match is found if the attribute exists, regardless of its value.
  • [attribute = value]: A match is returned if the attribute exists with the specified value.
  • [attribute ~= value]: A match is returned if the attribute exists, and it contains a comma-delimited list of values that contains the specified value.
  • [attribute |= value]: A match is found if the attribute is the first value in a hyphen-separated list of values for the attribute. The main application of this syntax is to match language subcodes specified by the lang attribute (xml:lang in XHTML).

Listing B illustrates attribute selectors in action. It formats the table if and only if it contains a summary attribute, and it sets the font color to white for columns with a value of sales in the abbr attribute. It sets the background to yellow for all table columns marked as col1 in the header attribute. (Caution: The example will not behave as expected in Internet Explorer, but it renders as designed in the latest version of Firefox. This site provides a table of what browsers support in relation to CSS selectors.)

In addition, you may combine attribute selectors so multiple conditions can be placed within a CSS rule. The previous example is modified in Listing C to demonstrate this point. Note that the formatting of the column header as white is applied only if the abbr attribute is set to sales and the scope attribute is set to col.

Up to this point, selectors have been designed to work with existing items within the document tree, but you can also work with elements that are not standard features of a page.

Pseudo-classes

CSS provides support for pseudo-elements and classes. In terms of CSS, pseudo means you can style something that doesn't have a CSS selector, as it doesn't exist within the document hierarchy. A good example is styling a hyperlink according to its state (visited, active, and so forth). The following list provides an overview of supported CSS pseudo-classes:

  • active: Apply a style an active element.
  • focus: Apply a style to an element when it receives focus.
  • hover: Apply a style when a user mouses over an element.
  • link: Apply a style to an unvisited link.
  • visited: Apply a style to a visited link.
  • first-child: Apply a style to the first child of an element.
  • lang: Allows the author to specify a language to use in a specified element.

The link-related pseudo-classes (active, hover, link, visited) were available in CSS1, while the others were added in CSS2. The syntax for working with pseudo-classes is the element with a colon separating it from the pseudo-class. Listing D uses pseudo-classes to style anchor elements, as well as the first-child element of paragraph element.

A good online guide is available to determine if a certain feature is supported by a specific browser. Pseudo-elements are also available to work with information.

Pseudo-elements

Pseudo-elements allow you to style information that is not available in the document tree. A couple of common examples include styling the first line or character of an element's content. The following list includes currently supported pseudo-elements:

  • first-line: Allows you to apply special styles to the first line of a paragraph.
  • first-letter: Allows you to style the first letter of an element's content. You may choose initial caps and drop caps, which are common typographical effects.
  • before: Allows you to insert generated content before an element's content.
  • after: Allows you to insert generated content after an element's content.

Listing E extends the previous example to style the paragraph using the first-line and first-letter pseudo-elements. The first line of the paragraph is displayed in all capital letters. The first line will be controlled by the browser and its width. As a result, you may want to insert your own line breaks or structure the text accordingly to control what is displayed on the first line. Also, the first letter of the paragraph is displayed in a larger, italic font utilizing a drop caps presentation.

Plenty of options

A common mistake many Web developers make is not familiarizing themselves with the various nuances of the CSS standard. A good example is selectors, which provide numerous options for styling elements within a Web page. Over the past two weeks, you have gotten a tour of the various selectors available when working with CSS. These selectors allow you to style elements based upon their type, the elements around them, properties, and so forth.

Do you favor certain selectors over others, or find support for certain selectors is sparse? Share your CSS experiences with the Web development community by posting to the article discussion.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

10 comments
micjohny
micjohny

Tried List A and B on IE 7. Didnt work.

boryto
boryto

The functionality described is very interesting, but there is no point using it if it doesn't work in IE. Unfortunately still more than 80& of users use IE explorer. Dose MS have any plans implementing this functionality in IE?

kuznles
kuznles

In HTML the lines come out line#1 black, next two lines red; However if you use XHTML the lines come out as they should. I tried this on IE6, IE7.

gregory.e.rubinstein
gregory.e.rubinstein

I copied the code from listing A and saved it as an HTML file, then ran it in IE - both paragraphs were displayed in red font color.

Len Harding
Len Harding

I am not sure, but I believe it works in IE 7. I would double check but I don't have were I am at right now.

jim359
jim359

What do you mean xhtml? What turns html into xhtml? Give an example if you would, please.

Len Harding
Len Harding

I had the same issue in IE6 but worked correctly in Firefox 2. I don't have IE7 here to try it on. Has anyone else tried it in IE7?

aspatton
aspatton

As we all know, IE is less than consistent or reliable when it comes to standards and especially CSS. The latest edition of IE is more compliant, but you should try Firefox or Netscape to appreciate the examples.

Len Harding
Len Harding

Thanks - that is a good list to have handy. Gotta love a good quick reference.