Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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>
thumb

CSS Videos

Element Selection

Standard SelectorsCombinator SelectorsStructural Selectorsnth Structural SelectorsUI Element States SelectorsUser Action SelectorsLink and Anchor SelectorsNegation and Language SelectorsPseudo Element SelectorsAttribute Selectors