⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Combinator Selectors

Published : December 4, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury

Learn how the combinator selectors work in CSS to enable element targeting based upon hierarchy and parent/child/sibling relationships. I have received enough questions from viewers about my CSS selector syntax to warrant a video lesson on the topic.

e e { } - Descendant Selector
<style>
div li{ 
    color:#F00; 
}
</style>
<div>
  <ul>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
</div>
e > e { } - Child Selector
<style>
div > p{ 
    color: red; 
}
</style>
<div>
  <p>Paragraph content ...</p>
  <article>
    <p>Paragraph content ...</p>
  </article>
</div>
e + e { } - Adjacent Sibling Selector
<style>
h3 + p {
    font-family:"Comic Sans MS", cursive;
    text-decoration:underline;
}
</style>
<h3>Some Stuff</h3>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>
<h3>More Stuff</h3>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>
e ~ e { } - General Sibling Selector
<style>
h3 ~ p {
    font-style:italic;
    color:#09F;
}
</style>
<h2>Some Stuff</h2>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>
<h3>More Stuff</h3>
<p>Stuff inside my paragraph...</p>
<p>Stuff inside my paragraph...</p>
<div>Stuff inside my div...</div>
<p>Stuff inside my paragraph...</p>
▲