The class attribute assigns one or more classnames to the <nav> tag.
Classnames are defined in a stylesheet or in a local <style> element.
Classes, i.e. classnames, are used to style elements.
A class attribute styling a <nav> element.
<style>
.bg-indigo { background-color: #3630a3; padding: 10px; color: white; }
.bg-indigo a { color: white; }
</style>
<nav class="bg-indigo">
<a href="javascript:alert('Home was clicked')">Home</a> |
<a href="javascript:alert('Gallery was clicked')">Gallery</a> |
<a href="javascript:alert('Contact Us was clicked')">Contact Us</a> |
<a href="javascript:alert('About was clicked')">About Us</a>
</nav>
Classes (i.e. classnames) are used for styling the nav element.
Multiple classnames are separated by a space.
JavaScript uses classes to access elements by classname.
Tip: class is a global attribute that can be applied to any HTML element.
<nav class="classnames">
| Value | Description |
|---|---|
| classnames | One or more space-separated class names. |
A class attribute styling a <nav> element.
Clicking the button toggles a classname that changes the background color.
<style>
.bg-teal { background-color: #2bacac; }
.bg-rose { background-color: #f45d49; }
.nav-class { padding: 10px; color: #fff; }
.nav-class a { color: #fff; }
</style>
<nav id="mynav" class="bg-teal nav-class">
<a href="alert('Home was clicked')">Home</a> |
<a href="alert('Gallery was clicked')">Gallery</a> |
<a href="alert('Contact Us was clicked')">Contact Us</a> |
<a href="alert('About was clicked')">About Us</a>
</nav>
<br />
<button onclick="toggle();">Toggle class</button>
<script>
let toggle = () => {
let element = document.getElementById("mynav");
element.classList.toggle("bg-rose");
}
</script>
Three CSS classes are defined in the <style> element.
The class attribute in <nav> assigns one classname.
Repeatedly clicking the button toggles another class, changing the background color of the <nav>.
Here is when class support started for each browser:
 Chrome
|
6.0 | Sep 2010 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
11.0 | Dec 2010 |
 Safari
|
5.0 | Jun 2010 |
Back to <nav>
