Class Selector in jQuery with Example

Class Selector in jQuery with Example
Rating: 5 - 1 Votes

Class Selector in jQuery with Example

jqueryIn previous tutorials, we have seen how to select HTML elements using their ID and Tag name.  In this tutorial, we will proceed with another selector which is a class selector.  We will select elements based on their class name.  The syntax for selecting an element by class is $(‘.ClassName’).  There are multiple ways of selecting an element based on its class name.  Some of the them are given below.

Single Element:  Selecting an element based on its class name.

Multiple Elements: Selecting multiple elements based on their class names.

Element with Multiple Classes:  Selecting an element which contains multiple classes of specific names and are separated by space.

Element ID & Class Name:  Selecting an element which contains specific ID and class name.

Element with Tag & Class Name:  Selecting an element which contains specific tag and class name.

Nested Element 1 – ClassSelecting an element which is nested inside another element based on ancestor and descendant class name.

Nested Element 2 – ID:  Selecting an element which is nested inside another element based on ancestor ID and descendant class name.

Nested Element 3 – Tag:  Selecting an element which is nested inside another element based on ancestor tag and descendant class name.

Examples are given below:

Single Element

Multiple Elements

Element with Multiple Classes

Element ID & Class Name

Element with Tag & Class Name

Nested Element 1 – Class

Nested Element 2 – ID

Nested Element 3 – Tag