DEV Community

Cover image for Head start with CSS Combinators and examples
Dany Paredes
Dany Paredes

Posted on • Updated on

Head start with CSS Combinators and examples

I continue fixing my CSS weakness and today is time for the CSS Combinators.

Sometimes, we want to select elements without affecting others and understand how the relation between elements is the key.

The CSS Combinators help to write a better CSS selector using the relation as key, we have 4 types of Combinators.

  • Descendant selector
  • Child Selector
  • Sibling Selector
  • General Sibling

The Descendant selector

It matches all elements that are descendants of the element.

My example, we have 2 div with the sandbox class and contains p and additional divs with p.

 <div class="sandbox">
        <p>hello</p>
      <div class="actions">
        <p>close</p>
      </div>
    </div>
     <div class="sandbox">
        <p>adios</p>
      <div class="actions">
        <p>close</p>
      </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

For set the background color to all p inside of sandbox.

.sandbox p {
 background-color: red;
}
Enter fullscreen mode Exit fullscreen mode

it works, but not 100%, because others p inside of actions div have the background color.

So, If we want a rule that select all dependents elements then, use descendants selector.

But if I want only the p of sandbox and skip the others, then the child selector comes to rescue.

Child Selector (>)

The Child Selector use > and only select all direct children of the selector, so we can get our goal about only select the p of sandbox.

.sandbox > p {
  background-color: red;
}
Enter fullscreen mode Exit fullscreen mode

Nice, let continue!

Let's add a bit more stuff into my sandbox, h2 and few spans.

I want to select only the first span close to my h2.

<div class="sandbox">
    <h2>
      Angular 11
    </h2>
    <span>
      Google Framework.
    </span>
    <span>ngInit</span>
    <span>Observable</span>
    <p>hello</p>

    <div class="actions">
      <p>close</p>
    </div>
  </div>
....
Enter fullscreen mode Exit fullscreen mode

Sibling Selector

The Sibling selector use + and select the next element in place of selector, in our case h2 span take the first span close to h2.

h2 + span {
    background-color: pink;
    display: block;
    border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode

Work! but if I want all the remain span close to first have other look ? Tok Tok General Sibling!

General Sibling Selector

The General Sibling use ~ and select all siblings placed after it, so in our case we want all span close to span have other look, but my first span keep his style.

span ~ span {
    background-color: gray;
    display: block;
}
Enter fullscreen mode Exit fullscreen mode

That's it! , that will give you a bit of help with CSS Combinators. If you enjoyed this post, share it and
Read more in MDN

Photo by Natalie Grainger on (Unsplash)

Top comments (3)

Collapse
 
janakasuar profile image
Jana Hranicka

Hello, this part is very nice. Result, HTML and CSS and tha color in the writing. Supper, Thank you. Jana

Collapse
 
danywalls profile image
Dany Paredes

I’m process of fix my css weakness, so I will continue writing about css learning process.

Collapse
 
ruslangonzalez profile image
Ruslan Gonzalez

Buen artículo !