Lessons
HTML
- HTML HOME
- HTML Introduction
- HTML Editors
- HTML Basic
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Styles
- HTML Formatting
- HTML Quotations
- HTML Comments
- HTML Colors
- HTML CSS
- HTML Links
- HTML Images
- HTML Tables
- HTML Lists
- HTML Blocks
- HTML Classes
- HTML Id
- HTML Iframes
- HTML JavaScript
- HTML File Paths
- HTML Head
- HTML Layout
- HTML Responsive
- HTML Computercode
- HTML Entities
- HTML Symbols
- HTML Charset
- HTML URL Encode
- HTML XHTML
HTML5
HTML Graphics
HTML Media
HTML APIs
HTML Examples
HTML References
- HTML Tag List
- HTML Attributes
- HTML Events
- HTML Colors
- HTML Canvas
- HTML Audio/Video
- HTML Doctypes
- HTML Character Sets
- HTML URL Encode
- HTML Lang Codes
- HTML Messages
- HTML Methods
- PX to Em Converter
- Keyboard Shortcuts
HTML Forms
HTML Classes
HTML The class Attribute
Using The class Attribute
The class attribute specifies one or more class names for an HTML element.
The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.
In CSS, to select elements with a specific class, write a period (.) character, followed by the name of the class:
Example
Use CSS to style all elements with the class name "city":
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Result:
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Tip: The class attribute can be used on any HTML element.
Note: The class name is case sensitive!
Tip: You can learn much more about CSS in our CSS Tutorial.
Using The class Attribute in JavaScript
JavaScript can access elements with a specified class name by using the getElementsByClassName() method:
Example
When a user clicks on a button, hide all elements with the class name "city":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>Tip: Study JavaScript in the chapter HTML JavaScript, or in our JavaScript Tutorial.
Multiple Classes
HTML elements can have more than one class name, each class name must be separated by a space.
Example
Style elements with the class name "city", also style elements with the class name "main":
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>In the example above, the first <h2> element belongs to both the "city" class and the "main" class.
Same Class, Different Tag
Different tags, like <h2> and <p>, can have the same class name and thereby share the same style:
Example
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>