HTML <dl> class Attribute

The class attribute on a <dl> tag assigns one or more classnames to the description list element. Classes are used to style elements. Classnames are defined in a stylesheet or in a local <style> element.

Example

#

A class attribute styling a <dl> element.

Kunstmuseum
Basel, Switzerland
National Gallery of Art
Washington DC, USA
Musée d'Orsay
Paris, France
<style>
  .dl-blue {background:aliceblue;border:solid 4px lightblue;padding:30px;width:300px;}
</style>

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

Using class

The class attribute assigns one or more classnames to the <dl> tag.

Multiple classnames are separated by a space.

Classes (i.e. classnames) are used for styling the dl element.

JavaScript uses classes to access one or more elements by classname.

Tip:  class is a global attribute that can be applied to any HTML element.


Syntax

<dl class="classnames">

Values

#

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

More Examples

A class attribute styling a <dl> element.
Clicking the button toggles a classname that changes the border color and border radius.

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

<style>
  .dl-border {background:aliceblue;border:solid 4px lightblue;padding:30px;width:300px;}
  .dl-rounded {border-radius:25px;border-color:steelblue;}
</style>

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

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

<script>
  let toggle = () => {
    let element = document.getElementById("mydl");
    element.classList.toggle("dl-rounded");
  }
</script>

Code explanation

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

The class attribute on the <dl> assigns one classname.

Repeatedly clicking the button toggles another class, changing the border radius of the data list.


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 <dl>
Guides