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:

Enjoy!

Alex manages design and front end development for sitepoint.com 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.


  • http://sawmac.com 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:
    ul
    li Carol
    ul
    li Marsha
    li Jan
    li Cindy
    li Mike
    ul
    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? :
      ul
      li Carol
      ol
      li Marcia /li
      li Jan /li
      li Cindy /li
      /ol
      /li
      li Mike
      ol
      li Greg /li
      li Peter /li
      li Bobby /li
      /ol
      /li
      /ul

  • 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: http://bit.ly/AdjSib
    General Sibling Selector: http://bit.ly/GenSib

    What happened to the ~ demo?

    Thanks!

    • Alex Walker

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

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.