CSS Elements: CSS Selectors
Accessing HTML elements using their CSS identifier is an easy task in jQuery. CSS provides two ways to refer to HTML elements: (a) CSS id and (b) CSS class. Like CSS, jQuery uses the same convention of using a hash character ("#") to refer to a CSS id and a dot character (".") to refer to a CSS class name.
CSS allows only one element per page that can have a given CSS id. On the other hand, CSS allows multiple elements with the same class name. An element can have both CSS class and CSS id; in fact, an element can have more than one class. An easy way to remember this is to think of a class room full of students. One class can have many students, but each student needs to have a unique (student) id!
Together, the combination of CSS id and CSS class allows us to design HTML elements such that we can be specific when we need or generic when we need. For example, if we would like to provide a unique behavior to an element (let us say the navigation bar), then we can identify it using a CSS id. On the other hand, if we would like to provide an identical design/behavior to all tabs in the navigation bar, then we can identify all of them using a (common) class. jQuery provides APIs to select all the elements belonging to a CSS class as well as individual elements identified with unique CSS ids.
Let us start with a table that provides two methods for accessing HTML elements as per their CSS identifiers.
| Selection | Description |
|---|---|
| $("#idElem") | Selects the first element with CSS id as "idElem" |
| $(".classElem") | Selects all elements with CSS class as "classElem" |
Ideally, we should have only on element with a given CSS ID. However, if we have multiple CSS elements with the same CSS id, then $("#idElem") selects the first element. On the contrary, $(".classElem") returns a list of all elements with the CSS class as "classElem". Please note that we can use the length property to find out the number of elements returned by the jQuery -- '$(".classElem").length' would return the number of all elements that have a class of "classElem".
Next, we provide three examples that highlight selection of elements using the CSS class and CSS id. All of these examples use the same HTML structure. The HTML code sources a JavaScript file ("selection_css.jss") that contains the jQuery logic. For all of these three examples, we keep the HTML code same and simply update this sourced jQuery/JavaScript file.
The HTML file contains two elements with class names: (a) a "div" element with class name "classTitle" and (b) an ordered list with class name "classOl". Further, the ordered list contains three list items, each identified by unique CSS IDs. Here is the HTML file:
<!doctype html>
<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<body>
<div class="classTitle">Nobel Laureates:</div>
<ol class="classOl">
<li id="idChemistry">Marie Curie (Chemistry, 1911)</li>
<li id="idPhysics">Albert Einstein (Physics, 1921)</li>
<li id="idPeace">Mother Teresa (Peace, 1979)</li>
</ol>
<script type="text/javascript" src="selection_css.js"></script>
</body>
</html>
The first example shows the usage of selecting elements based on the class name. The included JavaScript file ("selection_css.js", provided below) uses jQuery to query the two elements that have CSS class names. Next, we use the css() method of the jQuery object to modify the font-weight to bold and the font color to red. Note that we pass an anonymous function to the $(document).ready() method.
// Filename: selection_css.js
$(document).ready(function() {
// Make .classTitle bold.
$(".classTitle").css("font-weight", "bold");
// Make .classOl bold and red in color.
$(".classOl").css("font-weight", "bold");
$(".classOl").css("color", "red");
});
When we load this page, here is how the output looks like:
Figure: Selecting elements using CSS class
The above example is fairly simple. If we were to provide these font properties (weight and colors) to these elements statically, then a simpler way would have been to use CSS. However, this example demonstrates how we can use jQuery to modify the text of these elements on-the-fly.
The next example shows that we can use CSS IDs to be more specific. For that, we continue to use the earlier HTML page and simply update the "selection_css.js" file. The example assigns different ids to different list elements of the ordered list. Next, it locates individual elements and assigns different colors to them.
// Filename: selection_css.js
$(document).ready(function() {
// Make .classTitle and .classOl bold.
$(".classTitle").css("font-weight", "bold");
$(".classOl").css("font-weight", "bold");
// Assign different colors to CSS id elements.
$("#idChemistry").css("color", "red");
$("#idPhysics").css("color", "green");
$("#idPeace").css("color", "blue");
});
</script>
</body>
</html>
With the output, we see that each element of the list has a different color.
Figure: Selecting elements using CSS id
Selecting multiple CSS Elements
jQuery also allows us to query multiple CSS elements in one shot. The following table lists selection using two (and can be extended to more than two) CSS elements. If we want to list all elements of a DOM page (with CSS id, class or even non-CSS), then we can use '$("*")'. This is jQuery's flexibility at its best!
| Selection | Description |
|---|---|
| $(".classElem1,classElem2") | Selects all elements with CSS class "classElem1" or "classElem2" |
| $(".classElem1,#idElem") | Selects all elements with CSS class "classElem" or CSS id "idElem" |
| $("#idElem1,#idElem2") | Selects all elements with CSS id "idElem1" or CSS id "idElem2" |
| $("*") | Selects all elements, including non-CSS ones |
We provide a modification of the earlier program where we use jQuery to select multiple CSS elements. Once again, we reuse the earlier HTML page and merely update the included jQuery/JavaScript file ("selection_css.js"). This example selects both CSS classes (as $(".classTitle,.classOl")) and then makes the font bold for both elements. Next, the example selects all three CSS ids (as $("#idChemistry,#idPhysics,#idPeace")) and then makes the font color blue for all of them. Here is the updated "selection_css.js" file:
// Filename: selection_css.js
$(document).ready(function() {
// Select multiple class names.
$(".classTitle,.classOl").css("font-weight", "bold");
// Assign same color to multiple CSS id elements.
$("#idChemistry,#idPhysics,#idPeace").css("color", "magenta");
});
Here is the output:
Figure: Selecting multiple CSS elements