How CSS Class Selectors Work

CSSCSS facilitates the life of a frontend developer. Just by typing a line of code, the developer can easily change the whole appearance of a website. Selectors, particularly Class selectors, are one of the most important aspects of CSS.

 

Before diving into “class selectors”  in detail, let’s have a look at to “selector” concept;

<h1><font color="gray" > This is old school HTML </font></h1>

 

If you had just a few h1, it might have been OK to use this old notation. But in the actual websites, there are more than a few h1 or any of the other tags. There are many of them.

So, it would be wiser to use a different method to change the attributes of all these elements. And this method is CSS (You can check this article for an introduction to CSS).

Let’s see how to command your browser to change the color of all your h1 headings to grey using CSS;

h1 {color:grey;}

This is a CSS rule.

h1 is “the selector”.

{color:grey;} is the “declaration block”.

color is” the property”.

grey is “the value”.

You can also apply this formula to all the other HTML elements;

h3 {color:grey;}

 

p {color:grey;}

 

You can even use “HTML” tag. If you use HTML tag, it means that you want to change the properties of “all” elements in that particular website.

HTML {color:grey;}

 

There are some instances that a property gets more than one value. Look at this example;

p {font:large sans-serif;}

 

In this example, p has two values.

Which are large and sans-serif.

There is an empty space between these two values to seperate them.

Now, let’s say you want both h1 and h6 have the same properties.

How can you fix it in just one sentence ? Check this example;

h1,h6{color:red;}

 

By putting h1 and h6 side by side, you group the selectors.

Both h1 and h6 will have the same values (their color will be red) throughout the entire website.

Don’t forget to place a comma between the selectors.

You can also group declarations. Check this example;

h1,h6{color:red;}

 

h1,h6{background:white;}

As you can see, we have red h1 and h6 on white background.They have the same properties. So, let’s group both the selectors (h1 and h6) and declarations (color and background);

h1,h6{color:red; background:white;}

 

We left a blank space between color and background properties.
If we have many declarations for a single selector, we use grouping again. Check this example;

h3{color:red;}
h3{background:white;}
h3{font:20px;}

 

We used 3 lines for the declarations.
Actually, we can reduce it into a single line. Like this;

h3{color:red; background:white; font:20px;}

 

Or you can write it like this;

h3 {
color:red;
background:white;
font:20px;
}

 

Now, we can move on to “Class Selectors“.

This selector type is more sophisticated than the element selectors.

Let’s begin with the notation of Class Selector;

.trial {color:red;}

 

Watch out to the period (.) that comes before the name of the class (trial).

Unless stated otherwise, a class selector is not limited to any particular element.

In the example above, this notation means “font color will be red for every element that has a class attribute with the value of trial“. 

This is an example how to call a class;

<p class="trial">The text color is red.</p>
<span class="trial">The text color is red.</p>
<h1 class="trial">The text color is red.</p>

 

If the class selector (trial) is combined with an element like p;

p.trial {color:red;}

 

Only those p elements (like below) that has a class attribute with a value of trial will have a red font color.

<p class="trial">The text color is red.</p>

 

This p has a class attribute but it doesn’t have a value of “trial” (its’ value is “notrial”)

<p class="notrial">The text color is red.</p>

 

And in this example there is no p. The element is a span.

<span class="trial">The text color is red.</p>

 

If a general class selector (.trial) and an element specific class selector (p.trial) are used together, like;

 .trial {color:red;}
p.trial {font-weight:bold;}

 

All the elements with a class attribute and a value of “trial” will be red.

All the paragraphs (p) with a class attribute and a value of “trial” will be bold . The following elements will not be bold;

  • Elements other than paragraph (p).
  • Paragraphs without a class attribute.
  • Paragraphs with a class attribute but not trial value.

Multiple classes can also be used;

.colorclass  {color:red;}
.weightclass {font-weight:bold;}

 

An element’s class attribute may have two values (colorclass and weightclass);

<p class="colorclass weightclass">The text color is red.</p>

 

This paragraph will be both red and bold. Watch out that there is a space between two values.

The order of the values is not important (colorclass weightclass  or  weightclass colorclass).

These two classes can also be combined. The notation is like this;

.colorclass  {color:red;}
.weightclass {font-weight:bold;}
.weightclass.colorclass{background:white;}

 

As you see, class selectors provide great amount of flexibility for the developer.

Tolga Ayan

Writes articles about WordPress, CSS & Related Web Technologies. Resident of Alpharetta, GA.

We'll be glad to hear your comments !