Classes




<<<Previous Tutorial>>>

Next Tutorial>>>

CSS classes are commonly used to define a set of CSS styles and then apply them on an HTML element using selectors. To define a class within a CSS stylesheet, use the dot selector, as follows:

Each HTML element can have a set of classes, ordered in a specific order. Each class will potentially add a set of CSS definitions according to the styles that were defined in the page. In this piece of code we have defined a CSS rule that will be applied to every element that contains the “nice” class. This means that once this piece of code has been defined inside the HTML page, the following HTML paragraph will have the style applied to it:

 

HTML5 classList API

HTML5 introduced a new way to edit the class list of an element using the classList collection. Each HTML element returns the collection by accessing the element.classList member. The class list allows to add, remove, toggle and to check if an element contains a specific class.

Let’s see an example:

 

Since HTML5 is a relatively new standard, it is not supported on all browsers. It is safe enough to use today though. Here is the compatibility table for the feature: http://caniuse.com/#search=classlist

<<<Previous Tutorial>>>

Next Tutorial>>>