Css Grouping Selectors

CSS grouping selectors

Created By: chatGPT

In CSS, grouping selectors allows you to apply the same styles to multiple selectors without repeating code. This is particularly useful for maintaining cleaner code and reducing redundancy. You can group selectors by separating them with a comma.

h1, h2, h3 {
    color: blue;
    font-family: Arial, sans-serif;
}

In the example above, the styles for color and font-family are applied to all <h1>, <h2>, and <h3> elements. You can group any type of selector, including classes and IDs.

.button, .link, #header {
    text-decoration: none;
    display: inline-block;
}

You can also combine grouping with other CSS features, like pseudo-classes. Here is how you can style both link states and hover states together:

a, a:visited, a:hover {
    color: red;
    text-decoration: underline;
}

In this case, the styles for color and text-decoration are applied to the anchor <a> elements, regardless of their state. This means normal, visited, and hovered links will share the same styles.

ul, ol {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}