How the Brady Bunch Can Help your CSS

Share this article

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 WalkerAlex Walker
View Author

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Co-author of The Principles of Beautiful Web Design. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 60+ of SitePoint's book covers.

CSScss syntaxcss tutorials & articlesDOMinheritanceplussibling selectorstildeWeb Design Tutorials & Articles
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form