Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to select element with specific class and title attribute using jQuery?
If your element is having a class and title attribute, you can select it with jQuery using attribute selectors combined with class selectors. The syntax combines the class selector (dot notation) with the attribute selector in square brackets. You can try to run the following code to learn how to select element with specific class and 'title' attribute using jQuery.
Syntax
The basic syntax for selecting elements with both class and title attribute is ?
$(".className[title='titleValue']")
Example
Here's a complete example that demonstrates how to select and style elements with specific class and title attributes ?
<html>
<head>
<title>The Selector Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Select element with class 'big' and title 'one'
$(".big[title='one']").css("background-color", "yellow");
// Select element with class 'medium' and title 'two'
$(".medium[title='two']").css("background-color", "lightblue");
});
</script>
</head>
<body>
<div class="big" title="one">
<p>This is first division with class 'big' and title 'one'.</p>
</div>
<div class="medium" title="two">
<p>This is second division with class 'medium' and title 'two'.</p>
</div>
<div class="big" title="three">
<p>This is third division with class 'big' but different title.</p>
</div>
</body>
</html>
The output of the above code is ?
The first div will have a yellow background (matches .big[title='one']) The second div will have a light blue background (matches .medium[title='two']) The third div will have no background color change (class matches but title doesn't)
Conclusion
jQuery's attribute selector combined with class selector provides a powerful way to target specific elements that match both criteria. This technique is useful when you need to select elements based on multiple attributes for precise DOM manipulation.
2K+ Views
