complete css guide

Class selectors

Explanation

The control over page design that type selectors give you is powerful, but can be heavy handed. It's great to be able to change every paragraph, but what if you only want to change a specific paragraph, or a few paragraphs, which are all related? With HTML, you would add appearance-based mark up to just the text you want changed. With the style sheet approach that is a no-no, so how can we achieve the desired outcome?

First let's think about why you might want a particular paragraph to look different from other paragraphs. It's probably because the content of that paragraph is in some way different from other paragraphs on the page.

Think of an FAQ page, full of questions and answers. With old appearance-based markup, you might have marked up each question with the <b> tag, to make it bold. But if you think about it, boldness is not the important quality of the paragraph that you want to convey. "Question-ness" is the quality you want readers (or listeners?) to understand. You only used bold in the hope that it would demonstrate that this is a question, unlike the other paragraphs on the page, which are answers. But what if there's a word or expression in one of your answers that you'd really like to emphasize. I think you'd probably be tempted to use the <b> tag for that as well, wouldn't you? So, in theory, you're creating confusion here, because bold is starting to mean more than one thing. Of course, as humans are highly intelligent beings, able to unravel incredible levels of complexity, most people who read this page would probably understand your meaning exactly as you intended it to be understood. But pause for moment and consider that electronic publishing is not just about creating web pages that will be read by humans from computer screens. For example, how can a text-to-speech converter read your question with the correct intonation (which is integral to it being understood by the listener) if it doesn't even know it is different to other text which you want to be emphasized. Or what about if you want to pull out all the questions and print them out for a class discussion without the answers. All this strikes to the heart of what structural markup is all about.

Now, if there was an HTML element <question>, I know you'd be happy to use it in lieu of <b>. Of course, though, you can't just define your own HTML elements. You can, however define your own classes. This is easy.

In the HTML you give each of the paragraphs that contains a question a class attribute with the value of say "question". You'd probably also want to do the same thing with answers. There is a detailed explanation of how to do this below. It is also covered comprehensively in our self-paced course HTML and XHTML for CSS.

With cascading style sheets you can create selectors that are associated with a specific type or class of element. In the example above, we would identify two classes of paragraph - question and answer. We would then create two statements in our style sheet, one which affects only paragraphs of class question, and one which only affects paragraphs of class answer.

In short, a class selector selects any element of a given class.

Syntax

There are two forms of the class selector.

Solitary class selectors

The first type of class selector selects any kind of element of a particular class (so it will select both paragraphs and tables of that class, as well as any other element with the same class.) These are called solitary class selectors.

In a style sheet, the form of this type of class selector is simply .class-name, that is a dot followed by the name of the class.

In the Question and Answer example above, we would create two class selectors like this:

The first of these selectors selects any element on a page with a class of "question". The second selects any element on a page with a class of "answer".

Class selectors

The second type of class selector (strictly speaking these are the ones that are called class selectors) selects only a specific type of element of that class - for instance, it will select only paragraphs of that class, not tables or any other element of that class. The form of this type of selector is element.class-name, that is the name of the element, followed by a dot, followed by the name of the class.

In the question and answer example above, we would create paragraph specific class selectors like this:

The first of these selectors only selects paragraphs with a class of "question". It does not select any other kind of element with a class of "question", nor does it select any paragraphs other than those of class "question". The second only selects paragraphs of class "answer", not any other paragraphs, nor any other elements of class "answer".

Note that a class name should comprise only alpha numeric characters, and hyphens. They cannot include underscores and other characters, nor spaces. A class cannot begin with a numeral.

Use

We saw in the explanation above that we use class selectors to give specific parts of a page a specific appearance.

In a tutorial, your explanations might have a different appearance from procedures.

In a cookbook, a list of ingredients would have a different appearance from the instructions for cooking.

In the first case, we would create class selectors .explanation and .procedure, or if we were to have all explanations and procedures in paragraphs, p.explanation and p.procedure.

For the cookbook, we would have class selectors .ingredients and .instructions. If the ingredients are in a list, we might create a list item class selector, li.ingredients.

All that remains is to answer the nagging question, "what do you mean by an element of a given class?" What exactly is a paragraph of class "explanation"? A very good question.

HTML 4.0, the latest W3C recommendation introduced a new attribute for HTML elements, the class attribute. The format for this attribute is as follows. In your HTML document, to create a paragraph of class "instruction", you create a paragraph as usual, using the <p></p> tags. In addition, you add the class attribute to the opening tag as you would add any other attribute: <p class="instruction">. Any paragraphs on the page that are marked up in this way will be selected by either of these selectors: p.instruction or .instruction.

Our HTML 4.0 and XHTML for CSS includes a detailed, step by step lesson on how and why to use class selectors in your web pages.

Class selectors really are one of the most difficult ideas in style sheets to get your head around. If you have made it this far, and have a feel for

1. why they are valuable
2. when they might be used and
3. how to use them (even if the detail escapes you)

then you have done well. If you are still struggling a little, perhaps you should move on without worrying too much, and come back to this section later. You will get it.

© 1997- western civilisation pty. ltd. Contact Us Search Site