jQuery .class Selector

A jQuery .class selector selects all the elements for the specified class name. You can apply CSS or any other effects with jQuery by selecting single or multiple elements using the class name.

The class name is the value of the class attribute of the required HTML element.

JQuery .class Selector

To select an element, you have to find the class attribute of the element. After that, use the dot(.) before the class name as in the syntax given below.

Syntax

Let’s see the example to select an element and apply the CSS using jQuery.

Example

Output

Welcome to the tutorial world.

Tutorialdeep is the best way to learn jQuery.

You are learning jQuery.

The above example applies the red color to the specified class in the jquery class selector. However, this is for the single class to select only the single element. You can apply the color to more than one element by learning the next example.

Select Multiple Classes Using jQuery

If you want to apply the color or any other effect to more than one element at one go. You have to use the jQuery multiple class selector.

See the syntax given below to get the use of multiple class selectors.

Syntax

Let’s create an example to add multiple classes using the above syntax. It applies the same color to more than one element with different class names.

Example

Output

Welcome to Tutorial! A best place to improve technical skills.

It is the best place to learn web development and coding skills.

You are learning jQuery.

Learn jQuery with live examples.

The above example applies the green color to the multiple specified classes using the css().