How to use CSS Selectors In CSS
In 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.
<!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:
How to Transform a Basic List into a List Group with CSS?
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 Classes
- Using CSS Selectors