Compound CSS Selectors

In folder icon CSS June 20, 2024

Updated on June 20, 2024

In this part of this series, we will discuss compound selectors. As we did in the previous post when we talked about simple selectors, we will create a simple HTML page and style it while discussing compound selectors.

All parts:

  1. Getting Started with CSS
  2. Simple CSS Selectors
  3. Compound CSS Selectors

What are Compound Selectors?

Compound selectors target a single element based on its characteristics. A compound selector represents a set of simultaneous conditions on a single element. It's a sequence of simple selectors written together without any spaces.

A compound CSS selector can contain only one type selector or universal selector. If it contains a type selector or a universal selector, that selector must come first.

Create A New Project

Let's create a folder named compound-selectors. Within this folder, we'll create two pages: index.html and index.css.

Let's edit the index.html file and add the following code to it: 

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Compound CSS Selectors Examples</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <h1 class="color-black">Welcome to Compound CSS Selectors</h1>
  <p class="color-black info">This is a brief introduction to compound CSS selectors. For more information please
    visit <a href="https://www.w3.org/TR/selectors-4/">W3C</a>.
  </p>
  <h2 class="color-black">What are Compound Selectors?</h2>
  <p class="info">A compound selector represents a set of simultaneous conditions on a single element. It's
    a sequence of simple selectors written together without any spaces.
  </p>
  <h2 class="color-black">Purpose</h2>
  <ul class="info">
    <li>
      <p class="color-black">Target elements with multiple characteristics:</p>
      <p>
        They allow you to style elements that meet specific criteria beyond just element type, ID, or class.
      </p>
    </li>
    <li>
      <p class="color-black">Increase selector specificity:</p>
      <p>
        Combining simple selectors increases the specificity of your CSS rule.
        This becomes important when you have multiple rules targeting the same element and you want to ensure only
        the most specific rule applies.
      </p>
    </li>
  </ul>
  <h2 class="color-black">Benefits and Usefulness:</h2>
  <ul>
    <li class="benefits">
      <p class="color-black">Improved Styling Accuracy:</p>
      <p>
        By combining selectors, you can target specific parts of your HTML structure for styling. This helps
        avoid unintended styles being applied to elements you don't want to affect.
      </p>
    </li>
    <li class="benefits">
      <p class="color-black">Reduced Code Repetition:</p>
      <p>
        If you need to style multiple elements with the same class within a specific element (e.g., all h2
        elements with a class of important), a compound selector can achieve this in a single rule instead
        of needing separate rules for each element type.
      </p>
    </li>
    <li class="benefits">
      <p class="color-black">Maintainability:</p>
      <p>
        Using compound selectors for specific sections of your HTML can make your code more readable and
        easier to maintain.
      </p>
    </li>
  </ul>
  <h2 class="color-black danger">Potential downsides to consider</h2>
  <ul>
    <li>
      <p class="color-black">Overuse can lead to complex selectors:</p>
      <p class="danger">
        While compound selectors offer benefits, excessively long and
        complex selectors can become difficult to read and maintain. It's important to find a balance between
        specificity and readability.
      </p>
    </li>
    <li>
      <p class="color-black">Specificity wars:</p>
      <p class="danger">
        When multiple rules have high specificity due to compound selectors, it can lead to
        unintended styles being applied. Understanding CSS specificity is crucial to avoid these conflicts.
      </p>
    </li>
  </ul>
</body>
</html>

Let's add some rules in the index.css file to style the body element, the headings, the paragraphs, the list items, and the anchors. We'll use simple selectors, as we already learned in the previous post: 

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: rgb(56, 56, 57);
  margin: 0 auto;
  padding: 30px;
}
h1 {
  font-size: 40px;
}
h2 {
  font-size: 28px;
  margin-top: 50px;
}
p {
  margin: 0;
}
li {
  margin-bottom: 30px;
}
a[href*="w3.org"] {
  color: rgb(0, 68, 104);
}

Using Compound Selectors

The text on our page is a dark grey color. As you can see, we've applied a color-black class to the headings, the introductory text, and the first paragraph of the list items. That's because we want to color them black. Let's add a rule to our CSS file: 

.color-black {
  color: black;
}

Now, the elements with that class are black. 

We've styled all the elements with a color-black class. Now, we want to style only the paragraphs with that class. We can do that by using a compound selector:  

p.color-black {
  font-weight: bolder;
  margin-bottom: 5px;
}

For the elements with an info class, we'll set the font size to 18px: 

.info {
  font-size: 18px;
}

We want to make the paragraph that has both the color-black and info classes stand out. We will do that by changing its font size to 20px. Also, we will set a bottom margin. We can do that by using a compound selector: 

p.color-black.info {
  font-size: 20px;
  margin-bottom: 40px;
}

If we want to target anchor (a) elements with a hyperlink containing "w3.org" and apply styles only when the user hovers over the link, we can also use a compound selector: 

a[href*="w3.org"]:hover {
  color: rgb(0, 82, 33);
}

We'll apply a light red color to the element with a danger class: 

.danger {
  background-color: rgba(191, 57, 52, 0.2);
  padding: 10px;
}

We'll use a compound selector to select only the h2 heading with that class and add additional styles: 

h2.danger {
  border-left: 7px solid rgb(191, 57, 52);
}

To the list items with a benefits class, we'll add a green check mark instead of the default bullet style. For that, we'll add the following rule: 

.benefits {
  list-style: none;
  position: relative;
  padding-left: 25px;
}

Adding padding-left to the list items ensures there is enough space for the check mark on the left side.
Then, we'll use the ::before pseudo-element to add the check marks: 

.benefits::before {
  content: "✔";
  color: rgb(0, 82, 33);
  font-size: 18px;
  position: absolute;
  left: 0;
  top: 0;
}

The position: absolute on the ::before pseudo-element allows precise placement of the check mark relative to the list item, which is set to position: relative.

The content property uses a Unicode character for the check mark, which is styled with color and font-size.

Conclusion

Compound selectors give you the ability to target elements more precisely by combining multiple conditions. This allows you to create more specific and powerful CSS rules, enhancing your ability to style web pages effectively. 

Post last updated on June 20, 2024