How the Brady Bunch Can Help your CSS

Tweet

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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

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