How to Transform a Basic List into a List Group with CSS? Last Updated : 21 May, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report A list group is a common UI pattern used to display a collection of related items, often with additional styling to visually group them together. Table of Content Using CSS ClassesUsing CSS SelectorsUsing CSS ClassesThis approach uses CSS classes to style the list items and create a cohesive list group. By applying a specific class to the list container, we remove default list styles and set padding to ensure uniformity. Then, each list item within the container inherits these styles while receiving additional stylings such as background color and border, resulting in visually distinct and organized groupings of list items. Example: Implementation to transform a basic list into a list group using CSS classes. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> List Group with CSS Classes </title> <style> .list-group { list-style: none; padding: 0; } .list-group li { background-color: #f4f4f4; padding: 10px; border-bottom: 1px solid #ddd; } </style> </head> <body> <ul class="list-group"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> </html> Output: Using CSS SelectorsIn this approach, CSS selectors are used to style list items differently based on their attributes or classes. By applying specific styles to elements with certain classes or pseudo-classes like ":not()", we can create visually distinct groupings within the list. This method offers flexibility in styling individual list items based on their relationships or attributes, enhancing the overall presentation of the list group. Example: Implementation to transform a basic list into a list group using CSS Selectors. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> List Group with CSS Selectors </title> <style> ul { list-style: none; padding: 0; } ul li.group-start { background-color: #007bff; color: #fff; font-weight: bold; padding: 10px; } ul li:not(.group-start) { padding: 10px 10px 10px 30px; border-bottom: 1px solid #ddd; } </style> </head> <body> <ul> <li class="group-start">Group 1</li> <li>Item 1</li> <li>Item 2</li> <li class="group-start">Group 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </body> </html> Output: Comment More infoAdvertise with us Next Article How to add badge to list group in Bootstrap ? B bishalmandal235 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Create a List Group with Badges using CSS ? A List Group with Badges is a UI pattern that combines a list of items with additional visual indicators (badges) to convey extra information. Badges allow you to visually highlight or categorize items within a list. This is especially beneficial when you want to draw attention to specific elements 5 min read How to add badge to list group in Bootstrap ? In this article, we will learn how to make a badge list that gives the idea on a priority basis of the list. List Groups are used to display series of content. We can use the List Groups to display a series or list of content in an organized way & this can be helpful as we can modify it as per o 3 min read How to add an image as the list-item marker in a list using CSS ? The approach of this article is to learn how to add an image as the list-item marker in a list using list-style-image Property in CSS. Syntax: list-style-image: none | url | initial | inherit; Example: html <!DOCTYPE html> <html> <head> <style> ul { list-style-image: url( 1 min read How to Animate Bullets in Lists using CSS ? In this article, we will see how to animate bullet lists using CSS properties. First, we will create a bullet list using <ol> (or <ul>) and <li> and then we will apply some CSS properties to animate the lists. We will create an animation to increase the bullet point size and also s 2 min read How to create an unordered list with square bullets in HTML ? We will learn how to create an unordered list with square bullets using HTML and CSS. This simple yet essential technique enhances the visual appeal of your web pages. We will use the CSS list-style-type: square property to achieve this effect. The list-style-type property in CSS specifies the appea 2 min read How to Remove Indentation from an Unordered List Item using CSS? Removing indentation from an unordered list in web design involves eliminating the default left spacing applied by browsers. This can be achieved using CSS properties, allowing the list items to align flush with other content for a cleaner layout.Unordered List ItemAn unordered list item is a list e 2 min read Like