HTML & CSS
Article

AtoZ CSS Screencast: The General Sibling Selector

By Guy Routledge

Loading the player…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

Transcript

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:

h2 ~ p {
  color: red;
}

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>.

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

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.

This can be a little confusing as all the paragraphs could be said to be “general siblings” of each other but the selector would not match the first one. This could be the reason that this selector has been renamed in the CSS Selectors Level 4 spec to the “following sibling” selector.

<h2>Lorem ipsum</h1> 
<div>
  <p>Dolor sit amet</p> 
</div>

In this case, even though the paragraph comes after the <h2>, the paragraph and <h2> aren’t siblings so our selector won’t match anything here.

Practical Example

Let’s have a look at a practical example.

The Summary and Transcript accordions below use the general sibling selector to determine the open/closed state of each section. This whole behavior is purely handled in CSS; there’s no Javascript here!

See the Pen GjpzGq by SitePoint (@SitePoint) on CodePen.

The markup for the titles of each section has a hidden <input>, a <h1> with a <label> inside of it, followed by a <div> to contain the accordion content.

Clicking on the label, switches the :checked state of the input and then the general sibling selector allows the styling of the .accordion-content.

When the input is not checked, the max-height of the accordion is set to zero. When the input is checked, the max-height is set to an unlikely large value – 10000px in this case. Applying a bit of transition gives a smooth sliding animation.

input ~ .episode-accordion {
  max-height: 0;
}
input:checked ~ .episode-accordion {
  max-height: 10000px;
}
.episode-accordion {
  -webkit-transition: all 1s ease-in-out;
          transition: all 1s ease-in-out;
}

Other Child & Sibling Selectors

As this was a rather short episode, let’s take a look at some of the other combinator selectors available in CSS. These are supported since IE7 which should have the vast majority of use-cases well and truly covered.

Descendent Selector

The descendent selector has been around since forever and selects elements matching the second selector while they have the first selector as an ancestor.

div p { 
  color: red;
}

This selector will make all paragraphs in any child element of any <div> red.

Grandchild Selector

The Grandchild selector is similar to the descendent selector but selects elements that match the second selector if they are descendants of any child element of the first selector. It uses the asterisk character, but it’s important to note that this is not the same as the wildcard or universal “star” selector.

div * p { 
  color: red;
}

This selector will make all paragraphs in children of a <div> red.

Child Selector

The child selector, signified by the greater than sign, selects elements matching the second selector that are a direct child of elements matching the first selector.

div > p { 
  color: red;
}

This selector will make all paragraphs that are children of a <div> red.

Adjacent Sibling

The adjacent sibling selector is similar to general sibling selector and is signified with the + character. This selector will style elements matching the second selector as long as they appear immediately after an element matching the first selector.

div + p { 
  color: red;
}

This selector will make any paragraphs that directly follow a <div> red.

As I mentioned previously, all these selectors are available in IE7+ so you can (almost certainly) use them right now. Hopefully, they’ll come in handy for your next project.

More:
  • http://rafaelstz.github.io Rafael Corrêa Gomes ♛

    Thanks Guy

  • http://zaksdg.com Ahmad Murey

    That’s great,
    I always confused the tilde combinator but now it’s part of the past :)

    Thanks

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.