The adjacent sibling selector is an often forgotten, but useful selector. In this video, I will demonstrate the selector’s syntax and how it works, with a real-world example.

This video is taken from my course “CSS Selectors: Getting Started” on

Over a series of five lessons in that course, you will gradually build a CSS layout using 15 different types of selectors. You’ll gain an understanding of how these different selectors work, as well as how powerful CSS selectors can be. The course is for CSS beginners, and those who want to brush up on their selector knowledge.

Tags: adjacent sibling selector, css screencast, css selectors, learnable
Russ Weakley is a world-renowned author, speaker and CSS expert, with a detailed knowledge of web design and development. Russ chairs the Web Standards Group (WSG) and produced a series of widely acclaimed Learnable tutorials on CSS. He is currently touring a series of Responsive Web Design workshops around Australia.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • Karl Brown

    A really good video! I always enjoy Russ’ courses on because I learn something each time even if it’s something, like CSS, I’ve been working with for years. Adjacent selectors look like they’ll be a good replacement for some of the extra classes I’ve been known to throw in on HTML to target something.

    Thanks again, Russ!

  • dmathisen

    This is a new video, right? Why’d you mention IE6? I thought we’re all over that. IE7 isn’t even worth mentioning these days (and IE8 is almost completely out too).
    It isn’t available in IE6, but all other modern browsers. IE7/8 are modern? I don’t get it.
    TL;DR: IE6?!?!?!?11?

    That’s all I have… great video and tutorial either way.

    • LouisLazaris

      I think what he meant to say is that IE6 is the only browser that doesn’t support it, not that the other IEs are “modern”. He probably should have simply said “IE7+” or “IE8+”.

      • dmathisen

        Right. That sounds right.
        I was probably in a weird or bad mood yesterday and wanted to rant / be annoying. Obviously not a big deal :)

  • Christian Z.

    When you structure your document properly and use correct tags then the usage of these different CSS selectors starts to really make sense.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.