What are class selectors?

A class selector is set of styles that you can apply to one or more elements. See these examples:

<p class=”desc_text” >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor </p>

<h3> Lorem ipsum dolor <span class=”desc_text”> sit amet, consectetur adipisicing elit, sed </span> do eiusmod tempor </h3>

A class ‘desc_text’ when applied to the paragraph element stylizes the entire paragraph whereas when applied to the span element stylizes only the spanned text.

Though we will learn more about the ID selector later, the main difference between the two is that class selectors can be used for multiple selectors and ID selector can style a single element in the entire document.

Defining class selector in CSS

In CSS the class selector is preceded by a period ‘.’ followed by the class name and style definition. See below:

.desc_text {font-size: 10px; color: #cccccc; }

This kind of class selector could be applied to any element that matches the class attribute value ‘desc_text’.

You can also use the universal selector ‘*’ to define the class that matches any element in the document.

*.desc_text {font-size: 10px; color: #cccccc;}

But this one;

p.desc_text {font-size: 10px; color: #cccccc; }

will match any paragraph elements that have the class attribute containing the word ‘desc_text’. In the above example the span element would not match this class and hence the styles would not be applied. So this kind of rule applies only to a specific type of element.

Combination of general class selector and element-specific class selector

.desc_text { font-size: 10px; }

span.desc_text { color: #cccccc ;}

First declaration is an example of general class selector and the second one is of element specific class selector. You can declare both and use them together. The output of the above example would be as shown below:

* {font-size: 12px}

This declaration would set the font size of all the elements used in your document to 12px.

NOTE: Even though the universal selector is one handy option, consider the specificity of other selectors for it to work properly.

An element selector is an HTML element. There are other types of selectors too, which we will explore later. So the element selectors are the most basic selectors in your document structure. html, body, p, div, span, headings, etc are all different types of element selectors of a document. We can apply certain rules to them to stylize these selectors. For example, if we want all the paragraphs to be displayed in red color, we can do that by;

p { color: red}

Or if we want the heading 2 to appear with a gray background;

h2 { background-color: gray}

Grouping multiple declarations

We saw how to apply a single declaration to an element selector. But you can have multiple declarations in the same rule. See this example:

p { color: red; background-color: gray;}

In this rule, we have combined two declarations; (i) the font-color in all paragraphs to be red (ii) background color of all paragraphs to be gray. Semicolon is used as a separator between these declarations. If you notice, the last declaration is also followed by a semicolon. It is rather important to do so since browsers ignore the whitespaces in the style sheet. To make this clear see following example:

p { color: red; background-color: gray font-size: 10px; }

Since there is no ‘;’ after the value ‘gray’ for background-color, browsers check if the property has multiple values. But since font-size is not a valid value and background-color does not take multiple values, both the properties will be ignored. But note that the last declaration of the group need not end with a semicolon. For instance;

p { color: red; background-color: gray}

This will work absolutely fine in most of the browsers. But at a later stage, if you want to add some more declarations to the group, you must add a semicolon after this declaration, else it would ignored as shown in above example.

Grouping Element Selectors

We saw techniques to apply one or more styles to a single selector. But what if, you want to apply same style to more than one element selector. For instance, if you want heading 2 and paragraph both to be in red. It would be stupid of us if we write the same style for another element. There is a better way to do that;

h2, p { color: red}

In this example, we are using a comma to group two selectors, viz. ‘h3′ and ‘p’. Similarly you can group multiple selectors. This way you generate fewer lines of styles in your style sheet which in turn makes it easier for you to find out selectors and styles at a later stage when your style sheet has numerous rules defined in it.

Grouping multiple declarations with multiple selectors

By now we grouped multiple declarations for a single selector and we also grouped multiple selectors with a single declaration. Now it’s turn to group multiple declarations, with multiple selectors. Confusing enough isn’t it! Well this example would make it clear;

h2, p {

                color: red;

                background-color: gray;

                font-size: 10px;

}

These were some powerful and effective techniques of CSS. We will learn more in our coming articles, but for now I hope you enjoyed reading this.