Dofactory.com
Dofactory.com

HTML <li> class Attribute

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

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 3 <li> elements.

  1. Designers
  2. Developers
  3. Managers
<style>
  .job-title { color:teal; padding:3px 0; margin:5px 0; font-style:italic; }
</style>

<ol>
  <li class="job-title ">Designers</li>
  <li class="job-title ">Developers</li>
  <li class="job-title ">Managers</li>
</ol>

Using class

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

<li class="classnames">

Values

#

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

More Examples

A class attribute styling <li> elements.
Clicking the button toggles a classname that changes the background color for all items.

  1. Designers
  2. Developers
  3. Managers

<style>
  .job-title { color:teal; padding:3px 0; margin:5px 0; font-style:italic; }
  .moccasin { background-color:moccasin; }
</style>

<ol>
  <li class="job-title ">Designers</li>
  <li class="job-title ">Developers</li>
  <li class="job-title ">Managers</li>
</ol>

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

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

Code explanation

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

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

Javascript then iterates over the elements and toggle another classname changing the list item 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 <li>

Author: Jack Poorte
Published: Jun 20 2021
Last Reviewed: Sep 30 2023


Quick question: what's your favorite/least favorite part of Dofactory?


Guides