HTML & CSS
Article
By Guy Routledge

AtoZ CSS Screencast: The General Sibling Selector

By Guy Routledge
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

Loading the player…

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

--ADVERTISEMENT--

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.

In the above video covering the letter G, we looked at the General Sibling selector which allows styling of a sibling element. There’s also the other child and sibling selectors for traversing down/across an element tree.

But what about parent selectors? Well, despite the multiple use-cases of needing to select a parent element based on whether it contains certain children, this feature is not currently available in CSS.

But the good news is that they’ve made it into the CSS Selectors Level 4 spec. Woo Hoo! The parent selector, or the subject of the selector as it’s also called, allows you to select a parent element for styling. The latest draft of the spec uses an exclamation mark after the given selector to set the subject element.

The classic example of when you might want to style a parent element is in a menu. A navigation menu is normally an unordered list with a series of list items. Sometimes you may have a sub-menu that may be shown or hidden as a dropdown. It’s always been tricky to style the parent list item that has a sub menu without adding a class. With the new parent selector, it’s possible to achieve without one:

.main-menu li! .sub-menu {
  /* add styles to signify that this item has a submenu */
}

The Level 4 Selectors spec is still a work in progress, and I don’t know of any browser that supports it all yet. But when it does get released it will be a wonderful day!

More:
Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?