Delphinidin

CLASS AND ID SELECTORS
Class and ID selectors are the most widely supported. In fact, they are as widely supported as the type selector. There are two types of selectors. The class selector, which references the class attribute used on HTML elements, is the more generic of the two, meaning it may encompass many elements in a given document, even elements of different types or purposes. On the other hand, you can use the id attribute on only one element in an HTML document, so we use it in CSS to reference an element that is unique
per page. Besides using it in CSS, you can also use an element’s class or ID to access it via a scripting language such as JavaScript. You can also link to the location of the element with an ID name using fragment identifiers. Anchors are appended to URLs to force a browser to go to a specifi c place in a document. You can think of the id attribute as an element’s address inside a document: No two addresses can be the same.

- Class Selectors

<style type=”text/css”>
.planet { margin: 10px 0; padding: 20px 20px 20px 200px; border: 1px solid #FFF; background-position: 20px 20px; background-repeat: no-repeat;}
</style>

<div class=”planet venus”><h2>venus</h2></div>

The class name selector begins with a dot, followed by the class name itself, which you choose. In the preceding code, the class name selector is .planet. The class name should be comprised of letters, numbers, and hyphens only, to provide the best compatibility with older browsers. Class names must start with a letter and cannot include spaces. The dot appearing before the class name in the CSS rule tells CSS that you are referencing a class selector. The dot does not need to appear in the class attribute value itself; in fact, it cannot, because the value of the class attribute is just the class name itself.

When used in this context, the type of element doesn’t matter — in other words, you can also apply the class to other elements. What if you wanted to give both a <div> and an <img> element the same class name and have a style sheet rule that applies to <div> elements but not <img> elements? You can do that, too. Limiting a class selector to a type of element is demonstrated in the following code.

div.planet { margin: 10px 0; padding: 20px 20px 20px 200px; border: 1px solid #FFF; background-position: 20px 20px; background-repeat: no-repeat; }

This code shows the combination of two types of selectors that you are already familiar with. When you append a type selector to a class selector, you limit the scope of the style sheet rule to only that type of element. In this example, the rule is limited so that it only applies to <div> elements and no other type of element. You can still create additional rules that reference other elements, such as a new rule that only applies to <img> elements with a class name of planet, such as img.planet, but the rule that you see in the preceding applies exclusively to <div> elements with a class name of planet.

As you have seen, elements can also be assigned more than one class name, for example, class=”planet venus”. The value of this class attribute actually contains two class names: planet and venus. Each class name in the attribute is separated by a space. In the corresponding style sheet, the two classes may be referenced by two separate rules, as illustrated in the following code.

.planet { margin: 10px 0; padding: 20px 20px 20px 200px; border: 1px solid #FFF; background-position: 20px 20px; background-repeat: no-repeat;}
.venus {background-image: url(venus.jpg);}

The two style sheet rules in this code result in the <div> element, with both planet and venus class names receiving the declarations of both rules. If you’re thinking to yourself that venus looks like a good candidate to be an ID — there is only one venus, but many planets — you’re right. We’ll revisit this in a few minutes when we look at ID selectors. The class names may also be chained together in the style sheet, as shown here:

.planet.venus { background-image: url(venus.jpg);}

The preceding rule applies only to elements that reference both class names in their class attribute. Unfortunately, IE 6 interprets chained class names per the CSS 1 specification, which did not allow chained class names in the style sheet. In IE 6, only the last class name in the chain is recognized. In the preceding example, IE 6 would interpret the .planet.venus selector as .venus only. While this has been fi xed in later versions of IE it makes the use of chained classes unreliable if you must support IE6, so while it is a powerful technique it is best avoided by beginners. The consequence is that all elements with a class of venus will be affected by .planet.venus even those that do not also have a class of planet. Whereas classes are meant to reference more than one element, IDs are meant to reference only one element in a document.

- ID Selectors
ID selectors are unique identifiers; an ID is meant to be unique, defined once per document. Like the class selectors discussed in the previous section, a special character precedes ID selectors in a style sheet. To reference an ID, you precede the ID name with a hash mark (or pound sign, #). Like class names, this name cannot contain spaces and must start with a letter. You should use names that only include letters, numbers, hyphens and undersores for compatibility with the older browsers. You see how this is done in the following code.

<style type=”text/css”>#venus {background-image: url(venus.jpg);}</style>
<div class=”planet” id=”venus”><h2>venus</h2></div>

Since there’s only one venus in the solar system, venus lends itself as a good example of the concept of an ID selector. Just as there is only one venus in the solar system, the ID name venus can be used only once in a document, on one element. Browsers are forgiving of multiple ID names per document as far as style sheets are concerned.

However, using an ID name more than once in a document can cause confl icts with other applications of unique ID names. For example, ID names can be used to link to a location within a document (as HTML anchors), or when referencing an element by ID name from JavaScript. When you have an ID name appearing more than once in the HTML document, on more than one element, the browser won’t know which one you’re linking to, or which one you want to refer to from JavaScript, and will generally select only the first element with the ID. Always use the ID name for its intended purpose, just once per document.

An ID name must be unique in so far as other ID names are concerned, but it may be repeated as a class name, should you want to do so. It’s generally best to avoid this though as it’s easy to get confused and use the wrong kind of selector, resulting in styling the wrong element(s). Although only one element in a HTML document may have an ID of jupiter, the CSS may contain as many references to an ID as are necessary. The uniqueness rule only applies to naming the elements, not the references to them. Now that you’ve had a proper introduction to the different types of things that ID and class name selectors are capable of.

Read More :
CSS Selectors - Part 2