By Russ Weakley

Screencast: CSS’s Adjacent Sibling Selector

By Russ Weakley

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.

  • 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!

  • 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+”.

      • 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.

Get the latest in Front-end, once a week, for free.