Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML <dt> class Attribute

The class attribute assigns one or more classnames to the <dt> tag.
The text is italic.

Classnames are defined in a stylesheet or in a local <style> element.

Classes, i.e. classnames, are used to style elements.

Example

#

A class attribute styling a <dt> element with italic text.

Kunstmuseum
Basel, Switzerland
National Gallery of Art
Washington DC, USA
Musée d'Orsay
Paris, France
<style>
  .dt-italic { font-style: italic; }
</style>

<dl>
  <dt class="dt-italic">Kunstmuseum</dt>
  <dd>Basel, Switzerland</dd> 
  <dt class="dt-italic">National Gallery of Art</dt>
  <dd>Washington DC, USA</dd>
  <dt class="dt-italic">Musée d'Orsay</dt>
  <dd>Paris, France</dd>
</dl>

Using class

Classes (i.e. classnames) are used for styling the dt 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.


Syntax

<dt class="classnames">

Values

#

Value Description
classnames One or more space-separated class names.

More Examples

A class attribute styling a <dt> element. The text is italic.
Clicking the button toggles a classname that changes the background color for all <dt> elements.

1. Kunstmuseum
Basel, Switzerland
2. National Gallery of Art
Washington DC, USA
3. Musée d'Orsay
Paris, France

<style>
  .dt-italic { font-style:italic; }
  .dt-lavender { background-color:lavender; }
</style>

<dl>
  <dt class="dt-italic">1. Kunstmuseum</dt>
  <dd>Basel, Switzerland</dd> 
  <dt class="dt-italic">2. National Gallery of Art</dt>
  <dd>Washington DC, USA</dd>
  <dt class="dt-italic">3. Musée d'Orsay</dt>
  <dd>Paris, France</dd>
</dl>

<br/>
<button onclick="toggle();">Toggle class</button>

<script>
  let toggle = () => {
    let elements = document.getElementsByClassName("dt-italic");
    [].forEach.call(elements, element => element.classList.toggle("dt-lavender"));
  }
</script>

Code explanation

Two CSS classes are defined in the <style> element.

The class attributes assigned all <dt> elements one classname.

Clicking the button retrieves all <dt> elements using the classname.

JavaScript then iterates over the elements and toggles another class which changes the background color.


Browser support

Here is when class support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

 Back to <dt>

Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides