askvity

How to highlight selected list items in HTML?

Published in HTML & CSS 3 mins read

To highlight list items in HTML, typically you'll use CSS to style the <li> elements, often leveraging the :hover or :active pseudo-classes. Here's a breakdown of common methods:

Highlighting on Hover

The :hover pseudo-class allows you to change the appearance of a list item when the user moves their mouse cursor over it.

<!DOCTYPE html>
<html>
<head>
<title>Highlight List Items on Hover</title>
<style>
ul {
  list-style-type: none; /* Remove bullets */
  padding: 0;
  margin: 0;
}

li {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
}

li:last-child {
  border-bottom: none;
}

li:hover {
  background-color: #f0f0f0; /* Light gray background */
  color: black;
}
</style>
</head>
<body>

<h2>List Items Highlighting</h2>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

</body>
</html>

In this example:

  • ul styles remove default list bullets and padding.
  • li styles set padding and a bottom border for visual separation.
  • li:hover applies a light gray background color and black text color when the mouse hovers over a list item. You can customize the background-color and color to your preference.

Highlighting on Click (Active State)

The :active pseudo-class is triggered when the element is being clicked or activated. This is often used in conjunction with :hover to provide immediate visual feedback. This is particularly useful for clickable list items (e.g., navigation menus).

<!DOCTYPE html>
<html>
<head>
<title>Highlight List Items on Click</title>
<style>
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
}

li:last-child {
  border-bottom: none;
}

li:hover {
  background-color: #f0f0f0;
  color: black;
}

li:active {
  background-color: #ddd; /* Darker gray when clicked */
  color: black;
}
</style>
</head>
<body>

<h2>Clickable List Items Highlighting</h2>

<ul>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
</ul>

</body>
</html>

In this example:

  • The CSS remains similar to the hover example.
  • li:active now applies a slightly darker gray background color when the list item is clicked.
  • The list items are wrapped in <a> tags to make them clickable.

Highlighting Currently Selected Item (JavaScript/CSS)

If you need to highlight a list item to indicate that it's the currently selected or active item (e.g., in a navigation menu), you'll typically use a combination of JavaScript and CSS.

  1. Add a class to the selected item using JavaScript.
  2. Style the selected item using CSS based on that class.
<!DOCTYPE html>
<html>
<head>
<title>Highlight Selected List Item</title>
<style>
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 8px 16px;
  border-bottom: 1px solid #ddd;
  cursor: pointer; /* Indicate it's clickable */
}

li:last-child {
  border-bottom: none;
}

li.selected {
  background-color: lightblue; /* Highlighted background color */
  color: black;
}
</style>
</head>
<body>

<h2>Selected List Item Highlighting</h2>

<ul>
  <li onclick="selectItem(this)">Item 1</li>
  <li onclick="selectItem(this)">Item 2</li>
  <li onclick="selectItem(this)">Item 3</li>
  <li onclick="selectItem(this)">Item 4</li>
</ul>

<script>
function selectItem(element) {
  // Remove 'selected' class from all list items
  var listItems = document.querySelectorAll('li');
  listItems.forEach(item => item.classList.remove('selected'));

  // Add 'selected' class to the clicked list item
  element.classList.add('selected');
}
</script>

</body>
</html>

In this example:

  • The selectItem() JavaScript function:
    • Removes the selected class from all <li> elements.
    • Adds the selected class to the clicked <li> element.
  • The CSS .selected class:
    • Applies a light blue background color to the selected list item.
  • A cursor: pointer style is added to the li elements to visually indicate they are clickable.

This approach ensures that only one list item is highlighted as the selected item at any given time.

Related Articles