Skip to main content

Combining Selectors

Updated Mar 20, 2019 ·

Overview​

Different CSS selectors apply styles to various elements based on their type, position, or interaction.

The examples below use the following HTML file:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button>Click Me</button>
  <input type="text" placeholder="Type here">
  
  <p>Paragraph with default color.</p>

  <div>
    <p>Direct paragraph inside div</p>
    <section>
      <p>Nested paragraph inside section</p>
    </section>
  </div>

  <div>
    <h2>This is an H2 header</h2>
    <ul>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ul>
    <h2>This is another H2 header</h2>
    <ul>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
      <li>Fourth item</li>
    </ul>
  </div>
</body>
</html>

Grouping Selectors​

The same rule can apply to multiple elements using a comma.

button, p {
  color: blue;
}
  • Selects both h1 and h2
  • Applies the same style to both

This is useful for reducing repetitive code.

Descendant Selector (Space)​

This rule targets elements nested within a specific ancestor.

div p {
  color: red;
}
  • Selects all <p> elements inside <div>.
  • Works regardless of nesting depth

Use this when styling all occurrences of an element within a parent.

Child Selector (>)​

The > selector targets only direct children, ignoring nested ones.

div > h2 {
  color: green;
}

/* Only applies to direct <p> inside <div>, not nested ones */
div > p {
  font-style: italic;
}

Note:

  • In the <ul>, only top-level <li> elements are green
    • Sub-items remain unaffected
  • In the <div>, only the direct <p> is italic
    • Nested <p> inside <section> is unaffected

Use this to style only immediate child elements.

Adjacent Sibling Selector (+)​

The + selector targets an element immediately following a specified element.

button + input {
  border: 2px solid red;
}
  • Selects an input that comes directly after a button
  • Does not apply if another element is in between

Useful for styling elements based on their direct relation to others.

Chaining Selectors​

Apply styles only when multiple conditions are met. The syntax is as follows:

selectorselector {
  attribute: value;
}

For example, if we want to select a super specific h1 that has id=title and class='big heading', we can use:

h1#title.big.heading {
  color: green;
}
  • Add the specific element first in the chain
  • Use . to chain/append classes
  • Use # to chain/append id
  • No spaces between selectors

Hover Selector (:hover)​

The :hover selector applies styles when the user hovers over an element.

button:hover {
  background-color: lightgray;
}

-Changes the button's background when hovered -Enhances interactivity for users

Last Child Selector (:last-child)​

The :last-child selector targets the last child of a parent.

li:last-child {
  font-weight: bold;
}
  • Selects only the last li in each list
  • Useful for styling the final item in a group

Using Important​

Using !important forces a style, overriding all other rules. However, it should be used cautiously as it makes debugging harder.

input {
  background-color: yellow !important;
}

Combining Combiners​

CSS allows combining multiple selectors to create highly specific rules.

selector selectorselector {
  attribute: value;
}

For example:

div p:last-child {
  color: red;
}
  • Selects the last p inside any div
  • Useful for precise targeting within nested structures