Troubleshooters.Com® and Web Workmanship Present:

General Sibling CSS Combinators

See the Troubleshooters.Com Bookstore.

The General Sibling CSS Combinator is so difficult to explain that I've given this subject its own web page. On this page I'll abbreviate General Sibling CSS Combinator as GSCC.

The GSCC appears in a CSS selector. It always contains a tilde (~). The following are some examples of such selectors:

div~p
div.buzzword~p
div.buzzword~p.sep
div#section1~p.sep
hr~p

The general sibling combinator, ~, matches any sibling, in a bunch of siblings, that conforming to what comes after the tilde, if and only if that sibling comes after a sibling conforming to what's before the tilde. And when I say after, I don't mean directly after, I mean all the siblings matching the symbol following the tilde in the selector, that have an earlier sibling conforming to what comes before the tilde. You have to admit, this paragraph is mighty ambiguous, so let's take a specific example...

Imagine ten siblings, of which seven are paragraphs (p) two are divs (div), and one is a <pre></pre> element. Imagine the first two siblings are paragraphs, and the third sibling is a div. Here's the deal: Every paragraph sibling after that div matches the following CSS selector:

Now let's make a very short HTML file to demonstrate this:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
div.containr{
    border-style: ridge; 
    border-width: 3px; 
    padding: 0.2em;
}
div.containr>div~p{
    color:yellow; 
    background-color: darkblue;
}
</style>
</head>

<body>
<div class="containr">
<p>One</p>
<p>Two</p>
<div>2.5</div>
<p>Three</p>
<p>Four</p>
<p>Five</p>
<div><p>5.5</p></div>
<p>Six</p>
<pre>6.5</pre>
<p>Seven</p>
</div>
</body>
</html>    

The preceding HTML file produces the following output in a browser:

One

Two

2.5

Three

Four

Five

5.5

Six

6.5

Seven

Obviously, this needs some explanation. The <div.containr> restricts selections of div~p to direct children of div.containr. And of course all those direct children are siblings. Look at the preceding code, until you're convinced that every paragraph after the first of the siblings' div elements should be yellow on blue. In other words, the paragraph labeled "Three" and all subsequent sibling paragraphs should be yellow on blue. If you're having trouble understanding what is being said on this page, please email me.

In the output, we see ten siblings. Paragraph siblings are labeled One through Seven. The two div siblings are labeled 2.5 and 5.5, and the pre sibling is labeled 6.5. The first div sibling is the one labeled 2.5. The paragraph siblings before the first div are colored normally, but all paragraph sibling after the first div are yellow on blue. This is how the general sibling combinator works.

Note that if you wanted to reverse things so that only paragraphs above the first div are yellow on blue, you'd change the general sibling declaration block to be black on white, and earlier set div.containr>p to be yellow on blue.

Hopefully you now understand the general sibling CSS combinator (GSCC). If not, please email me with questions, so your questions can be answered, and I can uncover ambiguities, undefined terms, skipped logical steps, or falsehoods in this document.

Now that you have a grounding with General Sibling CSS Combinators, as well as CSS in general, it's time to

Now that you understand HTML, basic CSS, and General Sibling CSS Combinators, your next step is to read Designing For Mobile and Desktop Via Responsive Web Design, which has even more CSS tips and tricks, and introduces you to responsive web page techniques.


[ Training | Troubleshooters.Com | Email Steve Litt ]