How to check if a CSS class exists?
Good question. Whether you’re building a website, developing a web app, or just playing around with HTML documents, learning how to solve problems like this can be critical to your success.
The next logical question is, where? That is, do you want to check if the CSS class is present in your HTML document as a whole, or do you want to know if a particular element of DOM has it?
This tutorial will show you how to do both.
The Two Cases We Need to Cover
There are two cases we need to examine here to solve the problem in its entirety:
The first case is to check if a CSS class can be found anywhere in your HTML document. In other words, if the CSS class in question is assigned to any DOM element, or to no DOM element at all.
The second case is to check if a given DOM element—or type of DOM element, be it the body, a paragraph, a heading, or something else—has a CSS class in its class list.
Read on below to find out how you can use the browser console and a couple of vanilla JavaScript methods to solve for both of these cases.
Check If a CSS Class Exists in an HTML Document
If you want to check whether a CSS class is assigned to any DOM element in your HTML document, follow the steps in the guide below.
Step 1: Fire up your favorite web browser and open the web page where you want to make the check.
Step 2: Right-click anywhere on the web page and click on “Inspect” to launch your browser’s developer tools.
Step 3: Type in the following JavaScript method into the console, replacing CLASS-NAME with the class name that you’d like to look for (but keeping the quotation marks).
document.getElementsByClassName('CLASS-NAME');Step 4: Hit the Enter key on your keyboard and observe the results in the console.
How to interpret the results:
The document.getElementsByClassName JavaScript method returns an HTMLCollection (a type of array object) with all DOM elements that have the class name you’re looking for.
If there are DOM elements that have this class name, as shown on the screenshot above, they will be in the HTMLCollection. You can expand the collection by clicking on the arrow and hover your mouse over the DOM elements in question so that the browser highlights them.
If no DOM elements have this class name, as you can see in the screenshot from the browser console above, the HTMLCollection will be empty (its length property will be equal to 0).
Because no DOM element has this class name, by definition it doesn’t “exist” in your HTML document.
Check If a DOM Element Has a CSS Class
If you want to check whether a CSS class is assigned to a particular DOM element in your HTML document, follow the steps in the guide below.
Step 1: Fire up your favorite web browser and open the web page where you want to make the check.
Step 2: Right-click anywhere on the web page and click on “Inspect” to launch your browser’s developer tools.
Step 3: Type in the following JavaScript method into the console, replacing CSS-QUERY with your CSS selector and CLASS-NAME with the class name that you’d like to look for (but keeping the quotation marks).
document.querySelector('CSS-QUERY').classList.contains('CLASS-NAME');For example, if you want to check whether an element with an ID of nav-link-1 also has a class name of nav-link, your JavaScript code snippet would look like this:
document.querySelector('#nav-link-1').classList.contains('.nav-link');Note that this method only works for a single DOM element, and not multiple DOM elements.
It’s best to use it for checking whether a unique DOM element, such as one with an ID, also has a class name.
If the CSS query matches multiple DOM elements, the document.querySelector method in JavaScript will only select the first element.
How to interpret the results:
The classList.contains method returns a Boolean to indicate whether or not the class list of the selected DOM element contains the class name in question.
If it does, then you get back a true value:
If it doesn’t, then you will get back a false value:
