More About W3CSS Lists

In the previous article we started our discussion on lists. We saw how to create a basic list, a bordered list, a centered list and a list that looks like a card. In this article we shall study more about W3CSS lists. We shall first see how to create colored list and and colored item within the list. We shall then move on to create hoverable lists and change hover color of the individual list item. Finally we shall create lists with close-able items. So, let the fun begin.

Colored Lists

You can create colored lists by changing the background color of the whole list or individual item. To create background color of the complete list, add w3-color class to the opening “ul” tag. This will change the color of the whole list. On the other hand, if you want to change color of the individual list item add w3-color class to the opening “li” tag of the individual item. Take a look at the following code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <ul class="w3-ul w3-blue">
      <li>Banana</li>
      <li>Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
      <li>Peach</li>
    </ul>
    
    <br>
    
    <ul class="w3-ul w3-blue">
      <li>Banana</li>
      <li class="w3-pink">Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
      <li>Peach</li>
    </ul>
</body>
    
</html>

Download the code Try the code

Hoverable Lists

You can also create hoverable list that change color to light grey when hovered. You have two options here as well. Either change hover color of the complete list or change hover color of the individual list item. To do the former, add “w3-hoverable” class to the opening “ul” tag. Where as to add hover color to individual list item, add “w3-hover-color” class to opening “li” tag. Take a look at following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <ul class="w3-ul w3-hoverable">
      <li>Banana</li>
      <li>Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
      <li>Peach</li>
    </ul>
    
    <br>
    
    <ul class="w3-ul">
      <li>Banana</li>
      <li class="w3-hover-yellow">Apple</li>
      <li>Orange</li>
      <li>Strawberry</li>
      <li>Peach</li>
    </ul>
</body>
    
</html>

Download the code Try the code

Lists with Close Option

Often times we need to create lists with close option against each item. W3CSS makes it extremely simple for us.To do so add “w3-display-container” class to each opening “li” tag. After the list item, add span tag with a button that displays a cross. Also, set the onclick property of the span tag so that it sets the display property of the parent tag as none. Take a look at the following code to understand this concept.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <ul class="w3-ul">
      <ul class="w3-ul w3-card-4" style="width:25%">
    <li class="w3-display-container">Apple <span onclick="this.parentElement.style.display='none'" class="w3-button w3-transparent w3-display-right">&times;</span></li>
    <li class="w3-display-container">Orange <span onclick="this.parentElement.style.display='none'" class="w3-button w3-transparent w3-display-right">&times;</span></li>
    <li class="w3-display-container">Mango <span onclick="this.parentElement.style.display='none'" class="w3-button w3-transparent w3-display-right">&times;</span></li>
     <li class="w3-display-container">Banana <span onclick="this.parentElement.style.display='none'" class="w3-button w3-transparent w3-display-right">&times;</span></li>
  </ul>
  
    </ul>
    

</body>
    
</html>

Download the code Try the code

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .