When writing CSS, knowing the right selectors can make your stylesheets more efficient, maintainable, and powerful. Beyond the basic element, class, and ID selectors, there are advanced selectors that give you more control over how styles are applied. Let’s look at five CSS selectors every developer should master.

1. Child Selector (>)

The child selector targets only direct children of a parent element. It prevents styles from leaking too deep into nested structures.

div > p {
  color: blue;
}

In this example, only <p> elements that are direct children of a <div> will turn blue—not nested <p> tags inside another container.

2. Adjacent Sibling Selector (+)

The adjacent sibling selector applies styles to an element immediately following another.

h2 + p {
  margin-top: 0;
}

Here, the first <p> after every <h2> will have no top margin, helping create tighter typography control.

3. General Sibling Selector (~)

The general sibling selector is broader than the adjacent sibling. It matches all siblings after a specified element, not just the first.

h2 ~ p {
  color: gray;
}

This rule will turn all <p> elements following an <h2> gray.

4. Attribute Selector ([attr])

Attribute selectors let you target elements based on attributes and their values.

input[type="text"] {
  border: 1px solid #ccc;
}

This applies only to text inputs while ignoring other input types like checkbox or radio.

5. Pseudo-class Selector (:nth-child())

Pseudo-classes give you dynamic control over elements based on state or position.

li:nth-child(odd) {
  background: #f9f9f9;
}

This will style every odd-numbered <li> differently, perfect for zebra-striped lists or tables.

Conclusion

Mastering these selectors—child, adjacent sibling, general sibling, attribute, and pseudo-class—will help you write CSS that’s more targeted, efficient, and expressive. With practice, you’ll find your stylesheets become easier to manage while giving you more creative control over your layouts.