CSS3 Pushing the Limits E-Book

Stephen Greig

• Herausgeber: John Wiley & Sons
• Kategorie: Wissenschaft und neue Technologien
• Serie: Pushing the Limits
• Sprache: Englisch

Seitenzahl: 476

Veröffentlichungsjahr: 2013

Beschreibung

Push CSS3 and your design skills to the limit--and beyond! Representing an evolutionary leap forward for CSS, CSS3 is chock-full of new capabilities that dramatically expand the boundaries of what a styling language can do. But many of those new features remain undocumented, making it difficult to learn what they are and how to use them to create the sophisticated sites and web apps clients demand and users have grown to expect. Until now. This book introduces you to all of CSS3's new and advanced features, and, with the help of dozens of real-world examples and live demos, it shows how to use those features to design dazzling, fully-responsive sites and web apps. Among other things, you'll learn how to: * Use advanced selectors and an array of powerful new text tools * Create adaptable background images, decorative borders, and complex patterns * Create amazing effects with 2D and 3D transforms, transitions, and keyframe-based animations * Take advantage of new layout tools to solve an array of advanced layout challenges--fast * Vastly simplify responsive site design using media queries and new layout modules * Create abstract and scalable shapes and icons with pseudo-elements * Leverage preprocessors and use CSS like a programming language within a stylesheet context Don't pass up this opportunity to go beyond the basics and learn what CSS3 can really do!

Leseprobe

This edition first published 2013

© 2013 Stephen Greig

Registered office

John Wiley & Sons Ltd, The Atrium, Southern Gate, Chichester, West Sussex, PO19 8SQ, United Kingdom

For details of our global editorial offices, for customer services and for information about how to apply for permission to reuse the copyright material in this book please see our website at www.wiley.com.

The right of the author to be identified as the author of this work has been asserted in accordance with the Copyright, Designs and Patents Act 1988.

All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, except as permitted by the UK Copyright, Designs and Patents Act 1988, without the prior permission of the publisher.

Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not be available in electronic books.

Designations used by companies to distinguish their products are often claimed as trademarks. All brand names and product names used in this book are trade names, service marks, trademarks or registered trademarks of their respective owners. The publisher is not associated with any product or vendor mentioned in this book. This publication is designed to provide accurate and authoritative information in regard to the subject matter covered. It is sold on the understanding that the publisher is not engaged in rendering professional services. If professional advice or other expert assistance is required, the services of a competent professional should be sought.

Trademarks: Wiley and the Wiley logo are trademarks or registered trademarks of John Wiley and Sons, Inc. and/ or its affiliates in the United States and/or other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Ltd. is not associated with any product or vendor mentioned in the book.

A catalogue record for this book is available from the British Library.

ISBN 978-1-118-65263-3 (pbk); ISBN 978-1-118-65260-2 (ebk); ISBN 978-1-118-65261-9 (ebk)

Set in 9.5/12 Myriad Pro Regular by Indianapolis Composition Services

Printed in the United States by Bind-Rite.

Publisher’s Acknowledgements

Some of the people who helped bring this book to market include the following:

Editorial and Production

VP Consumer and Technology Publishing Director: Michelle Leete

Associate Director–Book Content Management: Martin Tribe

Associate Publisher: Chris Webb

Associate Commissioning Editor: Ellie Scott

Project Editor: Sara Shlaer

Copy Editor: Chuck Hutchinson

Technical Editor: Kevin Bradwick

Editorial Manager: Jodi Jensen

Senior Project Editor: Sara Shlaer

Editorial Assistant: Annie Sullivan

Marketing

Associate Marketing Director: Louise Breinholt

Marketing Manager: Lorna Mein

Marketing Assistant: Polly Thomas

Composition Services

Compositor: Indianapolis Composition Services

Proofreader: Joni Heredia Language Services

Indexer: BIM Indexing & Proofreading Services

About the Author

Stephen Greig is a hard working designer and front-end developer who is very passionate and considerate about the work he produces—a passion that is emphasized when it comes to CSS, particularly the more advanced and experimental CSS3 modules. It was his experimenting with these modules on his blog (http://tangledindesign.com/blog/) that paved the way for this book. Outside of his profession, Stephen enjoys sports, travelling, new experiences, and socializing with friends—who are often found in pubs! Follow him on Twitter via @Stephen_Greig.

Acknowledgments

First and foremost, Stephen would like to thank his partner Hannah, who put up with months of neglect and oversight, yet still offered a voice of constant encouragement throughout the writing of this book. Furthermore, Stephen is extremely grateful to his family for their continued support; in particular, he’d like to thank his dad, Syd Greig, for supplying many of the fantastic photographs used in the demonstrations throughout this book. The writing process was smooth and untroubled, thanks in no small part to project editor Sara Shlaer, who provided constant guidance and essential critique, playing a major part in crafting the final output. Huge thanks must also go to copy editor Chuck Hutchinson, who meticulously perfected everything he was presented with, and technical editor Kevin Bradwick, whose expertise and eagle eye ensured that all code functioned correctly and was error free.

CSS3 Pushing the Limits

Table of Contents

Introduction

What Is CSS3?

Who This Book Is For

What This Book Covers

How This Book Is Structured

Part I: New Toys

Part II: Transforms, Transitions, and Animation

Part III: Getting to Grips with New Layout Tools

Part IV: Pushing the Limits

A Word of Caution

Aim for Progressive Enhancement

Be Smart, Be Subtle

Demos and Browser Support

Part I: New Toys

Chapter 1: Advanced Selectors

Child and Sibling Selectors

Child Combinator

Adjacent Sibling Combinator

General Sibling Combinator

Attribute Selectors

Selecting Based on the Existence of an HTML Attribute

Selecting Based on the Exact Value of an HTML Attribute

Selecting Based on the Partial Contents of an HTML Attribute Value

Selecting Based on the Beginning of an HTML Attribute Value

Selecting Based on the End of an HTML Attribute Value

Selecting Based on Space-Separated HTML Attribute Values

Pseudo-Classes

Firsts and Lasts

Nth Child Selectors

Taking Nth Child to the Next Level with Expressions

The Best of the Rest

Bringing It All Together

Summary

Further Reading

Chapter 2: New Tools for Text

Perfecting Your Type

Ligatures

Kerning

Borrowing from SVG

Maintaining Legibility with Aspect Values

More Control with More New Toys

Writing Modes

The Direction Property

The Writing Mode Property

The Text Orientation Property

SVG to the Rescue!

Looking Good Is Half the Battle

Text Decoration

Masking Background Images Over Text

Text Shadow

Summary

Further Reading

Chapter 3: New Tools for Backgrounds and Borders

More Control with CSS3 Backgrounds

Background Clip and Background Origin

Background Size

Understanding the Background Shorthand

Handling Box Breaks

Into the Future with the Image Function

Multiple Backgrounds

The Syntax for Multiple Backgrounds

Layered Backgrounds

Animating Multiple Backgrounds

New Tools for Borders

Border Image

Into the Future with Border Corner Shape

Gradients

Linear Gradients

Radial Gradients

Pushing the Limits with Gradient Patterns

Summary

Further Reading

Chapter 4: Into the Browser with CSS3 Filters and Blending Modes

CSS3 Filters

How Do CSS Filters Work?

Grayscale

Brightness

Contrast

Saturate

Sepia

Hue-Rotate

Invert

Opacity

Drop Shadow

Blur

Combining Filters

Blending Modes

What Are Blending Modes?

The Blending Modes Syntax

Summary

Further Reading

Part II: Transforms, Transitions, and Animation

Chapter 5: Introducing CSS3 2D Transforms

The Transform Property

Translate

Skew

Rotate

Scale

Transform Origin

Combining Transforms

Browser Support

Summary

Further Reading

Chapter 6: Bringing 2D Transforms to Life with Transitions

Introducing CSS Transitions

Controlling Your Transitions

Understanding the Shorthand Syntax

Understanding the Transition Property

Applying Separate On and Off Transitions

Understanding the Timing Function

Browser Support for Transitions

Transitions in Action

Combining Transitions and 2D Transforms

Transitioning Rotate

Transitioning Translate

Transitioning Scale

Transitioning Skew

Creating a Scattered Image Gallery

Summary

Further Reading

Chapter 7: A New Dimension with 3D Transforms

What Are 3D Transforms?

It’s All About Perspective

The Perspective Property

Perspective Origin

Maintaining Perspective

Backface Visibility

Moving on to More Transform Properties

Rotating in a 3D Environment

Translating in a 3D Environment

Scaling in a 3D Environment

Creating a Cube Using 3D Transforms

Animating the Cube with Transitions

Examining Browser Support for 3D Transforms

Summary

Further Reading

Chapter 8: Getting Animated

Introducing CSS3 Animation

Defining Keyframes

Applying the Animation

Further Control

Looking at CSS3 Animations in Action

Adding Progressive Enhancement with Subtle Animation

Fade In Effects

Attention Seekers

Combining Animations

Forming the Structure

Creating an Animated Slide Show

Creating a Swinging Animation

Introducing Content with Subtle Animation

Seeking Attention with Loud Animation

Examining Browser Support for CSS Animation

Summary

Further Reading

Part III: Getting to Grips with New Layout Tools

Chapter 9: Creating a Multicolumn Layout

The Evolution of Layout Tools

What’s New in Layout Solutions?

Introducing Multi-column Layout

New Multicolumn Properties

Limitations

Creating a Multicolumn Layout

Examining Browser Support for Multi-column Layout

Summary

Further Reading

Chapter 10: Flexible Box Layout

What Is Flexbox?

New Flexbox Properties

Establishing the Flex Formatting Context

Examining Direction, Flow, and Visual Ordering

Controlling Alignment

Defining Flex Factors

Creating a Flexible Box Layout

Examining Browser Support for Flexbox

Summary

Further Reading

Chapter 11: Grid Layout, Regions, and Exclusions

Introducing CSS Grid Layout

What Is Grid Layout?

Creating a Grid Element

Defining the Grid

Positioning Elements into the Grid

Making Your Grid Flexible and Adaptable

Introducing CSS Regions

What Are CSS Regions?

How Do Regions Work?

Introducing CSS Exclusions

What Are CSS Exclusions?

How Do Exclusions Work?

Playing with Shapes

A Caveat on Exclusions and Shapes

Summary

Further Reading

Chapter 12: Going Responsive with CSS3 Media Queries

What Is Responsive Web Design?

Using Media Queries to Design for Device Differences

Understanding Media Types and Media Features

Applying the Mobile-First Approach

Using the Viewport Meta Tag

Making a Multicolumn Layout Responsive

Making a Flexbox Layout Responsive

A Word on CSS Grid Layout

The Here and Now of RWD

Summary

Further Reading

Part IV: Pushing the Limits

Chapter 13: Getting Creative with Pseudo-elements

Distinguishing Pseudo-elements and Pseudo-classes

What Is a Pseudo-class?

What Is a Pseudo-element?

Syntactical Differences

Exploring the Current Range of Pseudo-elements

Enhancing Your Typography with Pseudo-elements

Drawing Users into Your Copy

Getting Creative with Type-based Pseudo-elements

Using Pseudo-elements to Generate Content

Pushing Pseudo-elements to the Limit

A Contemporary Clearfix

Creating Scalable Icons and Shapes

Summary

Further Reading

Chapter 14: Using Preprocessors to Push CSS3 to the Limit

What Is a CSS Preprocessor?

What Can CSS Preprocessors Do for You?

Choosing the Right Preprocessor for You

Declaring Variables

Doing Functions and Simple Math

Using Mixins

Selector Inheritance

Nested Selectors

Getting to Grips with the Dark Side of Preprocessors

Step 1: Installing Ruby

Step 2: Installing Sass

Step 3: Creating Your First Sass File

Step 4: Compiling Your Sass Code

Helpful Tools

Making CSS3 More Efficient with Mixins

Creating Proportional Layouts with Simple Math

Using Functions to Form a Dynamic Color Palette

A Word of Caution on Preprocessors

Summary

Further Reading

Chapter 15: Creating Practical Solutions Using Only CSS3

Creating Tabbed Content Using Only CSS3

The Markup

Applying Basic Styling to the Panels

Styling the Tabs

Making the Tabs Functional

Applying the Finishing Touches

Creating a Lightbox Feature Using Only CSS3

Laying the Foundations for the Markup

Styling the Thumbnail Gallery

Adding the Lightbox Markup

Making the Lightbox Functional

Applying the Polish to the Final Design

Creating a 3D Image Carousel Using Only CSS3

Marking Up the Carousel

Establishing a 3D Formatting Context

Positioning the Images in a 3D Environment

Making the Carousel Functional

Applying the Finishing Touches

Summary

Further Reading

Chapter 16: The Future of CSS

CSS Variables

CSS Selectors: Level 4

Browser Support Using CSS Conditional Rules

Pseudo-elements: Level 4

Have Your Say

Summary

Further Reading

Introduction

CSS (Cascading Style Sheets) is a core requirement in any web designer’s toolkit, providing lifeless HTML with heart and soul since its inception in 1996. CSS has come a long way since then, though, and with the latest incarnation, CSS3, now boasts a vast range of impressive features that really push the boundaries of its status as a simple styling language. It doesn’t just paint the walls of your web pages anymore; now, the walls move, they adjust their shapes, the paint changes color, and all these effects are achieved without reliance on the bigger and smarter cousin that is JavaScript.

What Is CSS3?

CSS3 has received an incredible amount of coverage across the web, quickly transforming it into one of the industry’s most frequently used buzzwords, but it’s soon to be eclipsed and outdated by CSS4, right? Wrong!

In contrast to the preceding versions of CSS (1 and 2.1), CSS3 is not one giant specification that will eventually progress to CSS4 and beyond. Instead, the decision was made to modularize the entire specification, resulting in a comprehensive collection of various modules that all fall within the bracket of CSS3. Each of these modules is now free to progress independently at its own pace, without the possibility of being held back by other features.

The modules that simply further develop features from CSS 1 and CSS 2.1 are known as Level 3 modules, whereas brand new features and concepts form Level 1 modules. They will eventually progress to Level 4 and Level 2 modules at varying paces, but the entire collection can all be referred to as CSS3. In other words, there will never be a CSS4 or a CSS5 (despite what you may have seen across the web suggesting otherwise). Rather, CSS3 can be used to refer to everything after CSS 1 and 2.1.

With that said, I hope it’s plainly evident that there’s a bit more to CSS3 than a few rounded corners and drop shadows. This book takes you on a deep dive into the surprising new feats you can accomplish with CSS3, such as custom patterns with CSS gradients, manipulation of elements in a 3D environment, frame-based animations, and finally, complex layouts with comprehensive new layout tools!

Who This Book Is For

This book is about taking CSS3 to the next level, using advanced techniques and concepts to truly push the various features to their limits. It does therefore assume an intermediate to experienced level in terms of your skill and knowledge of CSS. As well as being considerably comfortable with everyday CSS, you ideally have experience with some of the more mainstream aspects of CSS3 and are ready to push things forward and advance to the next level. If you already have this foundational knowledge, you’re in a great position to make the most of this book.

What This Book Covers

As I mentioned previously, CSS3 has already received an astounding amount of attention, but much of it covers the same old ground. Conversely, this book takes you to the furthest corners of CSS3 to unearth the hidden gems that allow you to achieve things you didn’t know were possible with only a modest styling language.

The book also offers a few short refreshers on some of the more mainstream aspects of CSS3, before I demonstrate just how far you can push these features with the help of an open mind, allowing you to craft impressively rich and creative results.

How This Book Is Structured

As I discuss each new feature throughout this book, I introduce it with care and clarity before I raise the stakes and demonstrate how to harness its real power. You get to delve into many advanced examples, rich in both visual effects and interactivity, with some that are rounded and practical and others that are highly imaginative and experimental. However, everything you learn in this book is accompanied by the appropriate guidance to ensure the skills and knowledge you acquire are not misused; after all, a very wise man once said, “with great power comes great responsibility.” And who are we to question Uncle Ben?

The book is divided into four parts, each of which covers different aspects of CSS3 and the extensive range of modules that fall within this bracket. The next couple of pages break down the main sections of the book and outline precisely what’s in store for you throughout the next 300+ pages.

Part I: New Toys

Part I introduces a range of new CSS3 modules, from the maturing Level 3 Selectors module to the youthful and exciting Level 1 Filters module.

• Chapter 1: “Advanced Selectors”—There’s more to life than ID and Class selectors—much more in fact, and this chapter takes you through the lot, showing you how to target elements in ways you never thought possible!

• Chapter 2: “New Tools for Text”—CSS covered the basics of type from the very start, offering control over essential aspects of text such as line height and letter spacing, but now you can really satisfy the perfectionist within you thanks to a vast range of new type tools that provide a fine-grained level of control.

• Chapter 3: “New Tools for Backgrounds and Borders”—Ever wanted adaptable background images or crazy, decorative borders? How about elaborate patterns using nothing but CSS? Of course, you have! Well, you’re in luck because this chapter walks you through many of the new features boasted by the Level 3 Backgrounds and Borders module.

■ Chapter 4: “Into the Browser with CSS3 Filters and Blending Modes”—No longer do you have to rely on your graphical editing software to apply the simplest of image adjustments because the attention-grabbing Filters module preserves your valuable time. This chapter also provides a glimpse further into the future with the Blending Modes module, which takes image adjustments in the browser to another level entirely.

Part II: Transforms, Transitions, and Animation

CSS3 harnesses a great deal of its power within the Transforms, Transitions, and Animations modules. They combine to create the jaw-dropping effects that make you hastily inspect the code in disbelief, only to find a few simple CSS rules with no JavaScript in sight.

• Chapter 5: “A First Look at 2D Transforms”—Two-dimensional transforms form the basis of many impressive CSS3 experiments; this chapter walks you through the basic functionalities in detail.

• Chapter 6: “Bringing 2D Transforms to Life with Transitions”—The core concept and functionality of the various 2D transforms are impressive, but when combined with simple animation (transitions), they become a different beast entirely.

• Chapter 7: “A New Dimension with 3D Transforms”—If you thought 2D transforms were cool, then brace yourself for this chapter. The 3D aspect of the Transforms module allows you to produce truly mind-blowing visual effects with just a few lines of CSS, with no Flash or JavaScript in sight. In this chapter, you flip objects in a 3D environment, create a 3D shape, and then animate it!

• Chapter 8: “Getting Animated”—Transitions are great for animating from one state to another, but for anything beyond this, they’re just not sufficient. The CSS Animations module steps in here to provide a truly comprehensive animation tool, allowing you to create complex, keyframe-based animation.

Part III: Getting to Grips with New Layout Tools

For all the amazing advancements in CSS over the years, there is one fundamental aspect of web design that is so elementary in concept and yet CSS has struggled to master it. But no longer! With CSS3 comes a whole host of additional layout tools, each of which aims to tackle different layout dilemmas that have long been in need of a simple solution.

• Chapter 9: “Creating a Multicolumn Layout”—Multiple-column layouts are extremely popular in print publications and have been for a long time, and yet a simple solution for multicolumn web pages is only just filtering into the mainstream. This chapter walks you through the module and demonstrates how to create a functional multiple-column layout.

• Chapter 10: “Creating a Flexible Box Layout”—CSS has traditionally struggled with basic layout requirements such as vertical centering and directional flow, but with the brand new Flexible Box Layout module comes a comprehensive new layout mechanism, finally providing you with complete control over your layout. This chapter breaks down the complexities of an intimidating module and will have you eager to try it out at the first opportunity!

• Chapter 11: “Grid Layout, Regions, and Exclusions”—This chapter introduces the fresh-faced Grid Layout and Regions and Exclusions modules, which are still very much in development. By the end of this chapter, you will understand the immense benefits of these solutions and will no doubt be genuinely excited by the creative freedom of the impressive Regions and Exclusions modules.

• Chapter 12: “Going Responsive with CSS3 Media Queries”—Responsive web design has taken the web industry by storm over the past few years. This chapter discusses the fundamental aspects such as media queries before going on to demonstrate how the new layout modules make the responsive process that much easier for you.

Part IV: Pushing the Limits

By this point, you will be bursting with knowledge and eager to apply it. This part of the book does just that, showing you how to make the most of the various features of CSS3 and really push them to their limits.

• Chapter 13: “Getting Creative with Pseudo-elements”—Pseudo-elements open many doors in terms of creative CSS, allowing you to form advanced shapes using minimal, semantic HTML. I show you how you can use them to preserve your HTML while creating abstract and scalable shapes and icons.

• Chapter 14: “Using Preprocessors to Push CSS3 to the Limit”—No matter how much CSS advances, it will always be somewhat held back by its status as a styling language, rather than a programming language. Preprocessors bridge this gap and allow you to use advanced programming functionalities such as variables, functions, and math operators in a stylesheet setting to really make the most of the various CSS3 features.

• Chapter 15: “Creating Practical Solutions Using Only CSS3”—Finally, this chapter brings everything together and combines much of what is covered before it to create aesthetically rich, interactive, and practical solutions that really show the potential of CSS3 in a real-world setting.

• Chapter 16: “The Future of CSS”—CSS is constantly developing, and this chapter provides a sneak peek into what the future has in store, such as Level 4 Selectors, native CSS variables, and more!

A Word of Caution

With a powerful tool like CSS3 that is very much open to interpretation and incredibly easy to misuse, I feel it is important to establish some ground rules early on. I add more specific cautions at appropriate points throughout the book, but let’s start with a couple of general warnings.

Aim for Progressive Enhancement

Another phrase that will be etched into your brain come the end of this book is progressive enhancement. Nearly everything that falls within CSS3 is a work in progress, and in the majority of cases, the features can boast patchy browser support at best. This is where you must apply some common sense and ensure that you’re not using these features in ways that will affect the core functionality of your website. Instead, you should use these features to enhance your website in the browsers that can handle it, while ensuring that functionality is never compromised in those that can’t. In experiments, by all means go wild, but in production projects, you must use these new features wisely and with reason.

Be Smart, Be Subtle

With all these new toys, you can easily get carried away and go overboard with shiny new features such as gradients, shadows, and animation. But remember, just because you can doesn’t mean you should! Some of the new features may seem exciting and open up so many new doors, but you have to be careful which of these doors you go through; you must see past the novelty factor and ensure things are not overdone. Everything danced, blinked, flashed, and changed colors in the ‘90s. And it was annoying. Subtlety is the way forward.

Demos and Browser Support

Most of the examples throughout this book come with live demonstrations on the companion website at http://www.wiley.com/go/ptl/css3, where you can inspect the end result and trawl through the full code for a better understanding. To make my life easier, I coded all the demos to work in Google’s Chrome browser only, unless otherwise stated, so bear that in mind if you’re about to send me an angry email about my broken code!

As I previously alluded to, the various features within the range of CSS3 modules have patchy browser support, which I note in my discussions of each feature. However, most of the major browsers are now on very quick release cycles, meaning that they’re constantly gaining support for new features, so much of the compatibility data in this publication should be taken with a small pinch of salt.

A fantastic resource for the latest information on browser support is http://caniuse.com, which provides support data for the majority of CSS3 features discussed in this book and also shows which browser versions require vendor prefixes.

Towards the end of the book, I coded a couple of the demos to be viewed in Opera to take advantage of its browser support for the features being discussed. However, Opera has since decided to ditch its Presto rendering engine in favor of WebKit, so from version 15, its browser compatibility situation has changed completely. So don't be thrown when you see screen shots of my examples in Opera.

If you’d like to contact me regarding anything in this book, whether you need to ask for help or just want to say hi, feel free to send an email to [email protected]. You can also get in touch and follow my regular updates on Twitter via my handle, @Stephen_Greig.

Part I

New Toys

Chapter 1 Advanced Selectors

Chapter 2 New Tools for Text

Chapter 3 New Tools for Backgrounds and Borders

Chapter 4 Into the Browser with CSS3 Filters and Blending Modes

Chapter 1

Advanced Selectors

Web designers commonly get into the habit of using only a very small collection of basic CSS selectors, most notably the id, class, and descendant selectors, because that’s all they need…or so they think.

It’s true that you can accomplish almost everything with the class selector, but why compromise your nice, clean markup by adding unnecessary classes when you can choose from a range of more practical and efficient alternatives?

CSS3 has brought with it a whole host of such alternatives, some of which are simply wonderfully convenient and others that can make you excitedly ponder all the possibilities! What? CSS3 selectors are exciting!

In this chapter, you will learn about the different types of selectors, from sibling combinators to nth-child expressions. With the help of practical examples, you’ll be able to understand precisely what they do and how you can put them to use. I’ll finish the chapter by combining many of the various selector types that will be described between now and then to create some truly advanced CSS selectors.

Child and Sibling Selectors

The child and sibling combinators are actually among the more mature features in the Selectors module; however, despite this they’ve had trouble in finding the same kind of mainstream attention as and selectors enjoy. It’s about time they got a little nudge into the spotlight.