Combinator Selectors
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>