Class and ID Selectors

Class and ID selectors are used to style elements by using the attributes of the elements.

RECOMMENDED ARTICLES

Class and ID selectors are used to style elements by using the attributes of the elements. Class and ID selectors allow us to target specific parts of the CSS without affecting all the elements.

Class Selectors

Elements can be assigned classes so that the classes be used to select particular elements to style.

The above has two <p> elements. First <p> element is assigned a class of attribute science. The second <p> element has class of attribute  arts. The <span> element has the class with attribute difference. 

If we want to apply styles to elements using classes, we precede the class with a period (.)

The first <p> element will be colored red. The second <p> element will be colored blue. The <span> element will be colored green.

Using class selectors in conjunction with elements

Class selectors can be used with elements. You type the selector, type a period followed by name of the class. The separates the element selector from the class selector. For example,

The style will affect not all <p> elements but only <p> elements with the class science. The output will be :

The types of sciences include Biology, Physics, Chemistry, Geology.

The types of arts subjects include Government, Geography. Arts is equally important as Science. We should also note that information technology is also science. In most instances, a general class selector is first applied followed by an element specific class selector to further add specific styles to particular elements. For example,

All elements with the science class are in red. Besides, only span elements with science class are in boldface. Here, we see general style applied followed by specific style for <span> element. 

Note the following :

applies to all elements bearing the science class. This will have same effect as writing it without the universal selector. That’s,

Just like in programming languages, don’t begin a class name with number in CSS. This will create problem in CSS validation. For example, don’t write

Using number to begin class names may be pardoned in HTML but not in CSS. If the user of a number to begin a class becomes a must, precede it with forward slash. That’s, 

In a CSS, if you have to deal with a class that begins with a number, use a backslash in between the period and first number. For example,

Multiple Classes

Two or more classes can be combined in one rule. For example,

.science.arts is two combined classes. Elements bearing those classes are boldfaced. 

We can also apply two classes to a single element by separating the class values with space. For example,

Here, the style of both science and arts are applied to the element.

An element can also be given an id. id is short for Identity. An id is similar to a class. However, id is used to uniquely refer to a particular element only. If you want to apply a particular rule to two or more elements, use a class instead. The analogy is that several elements can be in one class but identity is unique.

For example,

If we want to style the <div>with the “header” id, we use 

For an id, we precede it with the hash or pound sign.  

Note :  

An id cannot begin with a number. If by any chance, you have to refer to an id in HTML document that begins with a number, use a backslash between the pound sign and the id name. For example, 

When to use class or id

Class is used when we want to apply style to two or more elements. An id is used if we want to apply style to only one element. 

Why id selector should be unique

 If you have more than one of the same ID value in a document, DOM scripting becomes more difficult. JavaScript function like getElement ById() picks only one unique element with the stated id value. 

Combining id selectors

You can combine two id selectors. For example, 

You cannot use names separated by space for value of id. That’s, the following id value is wrong.

“ashanti empire” is wrong because it’s separated by space.  Because space isn’t allowed in id names,  two or more IDs cannot be combined to style an element like the way we do with classes.