The “C” in CSS — the “cascading” part — describes the way our styles can flow down from the high-level architecture in our documents, down to the smaller page elements. It hints at the normal direction that styles flow — downwards — but this isn’t the ONLY way styles can be routed to one page object via another.

Sibling selectors is one method that I find is often overlooked. Personally I’ve known vaguely what they did for years, but never fully understood the mechanics until quite recently. Frankly, they’re a little weird, so using them often requires a bit of a rethink.

With some help from the Bradys, some CSS and touch of virtual electricity, I’ve pulled together a couple of examples showing how siblings selectors work.

So, if you never *quite* got your head around how the tilde (~) and plus (+) signs work in CSS, here’s the perfect four-minute dash to get you on track.

Again, we’re using Lea’s awesome Dabblet for the examples, and you can play along here:


Tags: CSS, css syntax, css tutorials & articles, DOM, inheritance, plus, sibling selectors, tilde, Web Design Tutorials & Articles
Alex manages design and front end development for and is SitePoint's Design and UX editor.

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.

  • Dave McFarland

    Unfortunately, in the TV show Mike and Carol are the parents of Marsha, Jan, Cindy, Greg, Peter and Bobby. More semantic HTML would look like this:
    li Carol
    li Marsha
    li Jan
    li Cindy
    li Mike
    li Greg
    li Peter
    li Bobby

    • Alex

      Dave, I wanted to keep the markup simple so people could focus on the sibling stuff, but true.

      Although wouldn’t it be more like? :
      li Carol
      li Marcia /li
      li Jan /li
      li Cindy /li
      li Mike
      li Greg /li
      li Peter /li
      li Bobby /li

  • jlemesur

    Great jumpcast! I was always mystified by siblings.

  • rachel

    Cool jumpcast!

    But…these two demos are using the same css selector: li:hover + li

    Adjacent Sibling Selector:
    General Sibling Selector:

    What happened to the ~ demo?


    • Alex Walker

      Hmm.. well spotted, Rachel. Fixed. Thanks for the heads-up!

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.