AtoZ CSS Screencast: General Sibling

General sibling is a little known but very useful CSS selector.

It allows the styling of an element that is a sibling of another.

We’ll look at the syntax, a practical example and then a quick round up of the other child and sibling selectors in CSS.

Syntax

The general sibling selector is part of the family of combinator selectors in CSS and is identified with the tilde character. It looks a bit like this:

[code language="css]
h2 ~ p {
color:red;
}
[/code]

This selector will style any paragraphs that are siblings of a second-level heading and occur after the h2.

The benefit of this selector is that the paragraphs don’t have to be adjacent siblings of the h2.

[code language="html"]
<article>
<h1>Lorem ipsum</h1>
<p>Dolor sit amet</p>
<h2>Lorem ipsum</h2>
<p>Dolor sit amet</p>
<h3>Lorem ipsum</h3>
<p>Dolor sit amet</p>
</article>
[/code]

In this code snippet, both the paragraphs after the h2 will be red, but the first one will not as it doesn’t come after a h2 in the document.

Continue reading %AtoZ CSS Screencast: General Sibling%

by Guy Routledge via SitePoint