CSS - Class Selectors

Class Selectors in CSS

CSS class selectors are used to select elements with a specific class attribute. The class selector is defined using aperiod (.)followed by theclass name.

Syntax

The syntax for CSS class selectors is as follows:

.classname {

    /* property: value; */

    background-color: #04af2f;

}

Basic Class Selector

To apply abackground-colorand textcolorto elements with a specific class, we have used a basic class selector.

Example

The following example applies the background color and text color to all elements with the classcontainer.

Multiple Class Selectors

We can use multiple classes with any element. All the classes are separated by dot. It works only when all the class name matches.

Example

The following example adds aborderand background color to div 1 and div 2 remains with default styles.

Combining Class Selector with Other Selectors

Class selectors can be combined with other selectors to select specific elements.

Example

This example sets thefont sizeandfont familyfor onlyp elementshaving a class name container.

Combining Multiple Classes

We can use multiple classes on any element to add different styles using different classes.

Example

Here is an example where we have used two different classes on div element to add a border and background color.

Using Class Selectors with Media Queries

We can create a responsive design by using class selectors withmedia queries.

Example

Here is an example where the background color of the web changes depending on the screen size.