CSS sibling selectors
The are two selectors in CSS which are able to target siblings,
~. There are few use cases for these selectors, but in the past I have been very thankful for their existence.
Adjacent sibling (+)
The adjacent sibling selector will match the next element in the DOM.
Let’s colour the next div after
General sibling (~)
The general sibling selector is similar, but will style all the siblings after a particular element.
Let’s colour all the divs after
Use case: Markup dependent styling
These selectors particularly useful when working with dynamic markup. If you are working with a data feed, for example news stories, it is unpredictable how much data each story will have. Some stories might have images, some might not. We can use sibling selectors to style stories differently depending on the markup that has been rendered. Consider the following the markup:
We can use sibling selectors to hide the summary paragraph when a story has an image.
We could then choose to show the paragraph using media queries when the screen is big enough. This is a responsive technique I have found useful in some complex layouts I have worked on in the past.
Use case: Styling by checkbox state