February 10, 2016
Class Selector in jQuery with Example
In 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 – Class: Selecting 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
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function singleClass()
{
$('.single').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Single Class " onclick="singleClass()" > </input>
<div class="single ">Hello World!</div>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function singleClass()
{
$('.single').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Single Class " onclick="singleClass()" > </input>
<div class="single ">Hello World!</div>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function singleClass()
{
$('.single').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Single Class " onclick="singleClass()" > </input>
<div class="single ">Hello World!</div>
</body>
</html>
Multiple Elements
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('.class1, .class2').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div class="class1 ">Class 1</div>
<div class="class2 ">Class 2</div>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('.class1, .class2').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div class="class1 ">Class 1</div>
<div class="class2 ">Class 2</div>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('.class1, .class2').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div class="class1 ">Class 1</div>
<div class="class2 ">Class 2</div>
</body>
</html>
Element with Multiple Classes
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('.class1.class2').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div class="class1 class2 ">Class 1 & Class 2</div>
<div class="class3 ">Class 3 </div>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('.class1.class2').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div class="class1 class2 ">Class 1 & Class 2</div>
<div class="class3 ">Class 3 </div>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('.class1.class2').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div class="class1 class2 ">Class 1 & Class 2</div>
<div class="class3 ">Class 3 </div>
</body>
</html>
Element ID & Class Name
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('#myDiv.class1').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div id="myDiv" class="class1 ">Class 1</div>
<div id="myDiv2" class="class2">Class 2 </div>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('#myDiv.class1').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div id="myDiv" class="class1 ">Class 1</div>
<div id="myDiv2" class="class2">Class 2 </div>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('#myDiv.class1').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div id="myDiv" class="class1 ">Class 1</div>
<div id="myDiv2" class="class2">Class 2 </div>
</body>
</html>
Element with Tag & Class Name
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('span.class2').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div id="myDiv" class="class1 ">Class 1</div>
<span id="mySpan" class="class2">Class 2 </span>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('span.class2').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div id="myDiv" class="class1 ">Class 1</div>
<span id="mySpan" class="class2">Class 2 </span>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('span.class2').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div id="myDiv" class="class1 ">Class 1</div>
<span id="mySpan" class="class2">Class 2 </span>
</body>
</html>
Nested Element 1 – Class
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('.class1 .SpanClass1').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div id="myDiv1" class="class1 ">
<span class="SpanClass1 "> Class 1 </span>
</div>
<div id="myDiv2" class="class2 ">
<span class="SpanClass2 "> Class 2 </span>
</div>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('.class1 .SpanClass1').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div id="myDiv1" class="class1 ">
<span class="SpanClass1 "> Class 1 </span>
</div>
<div id="myDiv2" class="class2 ">
<span class="SpanClass2 "> Class 2 </span>
</div>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('.class1 .SpanClass1').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div id="myDiv1" class="class1 ">
<span class="SpanClass1 "> Class 1 </span>
</div>
<div id="myDiv2" class="class2 ">
<span class="SpanClass2 "> Class 2 </span>
</div>
</body>
</html>
Nested Element 2 – ID
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('#myDiv2 .SpanClass2').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div id="myDiv1" class="class1 ">
<span class="SpanClass1 "> Class 1 </span>
</div>
<div id="myDiv2" class="class2 ">
<span class="SpanClass2 "> Class 2 </span>
</div>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('#myDiv2 .SpanClass2').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div id="myDiv1" class="class1 ">
<span class="SpanClass1 "> Class 1 </span>
</div>
<div id="myDiv2" class="class2 ">
<span class="SpanClass2 "> Class 2 </span>
</div>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('#myDiv2 .SpanClass2').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div id="myDiv1" class="class1 ">
<span class="SpanClass1 "> Class 1 </span>
</div>
<div id="myDiv2" class="class2 ">
<span class="SpanClass2 "> Class 2 </span>
</div>
</body>
</html>
Nested Element 3 – Tag
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('div .SpanClass1').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div id="myDiv1" class="class1 ">
<span class="SpanClass1 "> Class 1 </span>
</div>
<div id="myDiv2" class="class2 ">
<span class="SpanClass2 "> Class 2 </span>
</div>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('div .SpanClass1').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div id="myDiv1" class="class1 ">
<span class="SpanClass1 "> Class 1 </span>
</div>
<div id="myDiv2" class="class2 ">
<span class="SpanClass2 "> Class 2 </span>
</div>
</body>
</html>
<html>
<head>
<title>jQuery Tutorial </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function SelectClass()
{
$('div .SpanClass1').css("background-color", "red");
}
</script>
</head>
<body>
<input type="button" value="Select " onclick="SelectClass()" > </input>
<div id="myDiv1" class="class1 ">
<span class="SpanClass1 "> Class 1 </span>
</div>
<div id="myDiv2" class="class2 ">
<span class="SpanClass2 "> Class 2 </span>
</div>
</body>
</html>
