What does “>”, “+” and “~” do in CSS

You have probably all seen these characters in your CSS files, so what exactly do they do? Before we answer that, the characters that we are going to look at today are: > (greater than), + (plus sign) and ~ (tilde). In CSS they are known as selectors. Selectors are patterns used to select the element you want to style, although there are many different selectors (a dedicated page of all CSS Selectors will go up soon), we will just be looking at the three we have mentioned.

1. > (greater than) selector

This is referred to as a child selector. A CSS child selector applies to the elements that are children of another element. A child element is an element that is the immediate or direct descendant of another element. For example, a selector of the form “E > F” matches when element F is a direct descendant of element E.
Lets look at the following code:

span { background-color: #fff; }
div > span {
   background-color: green;
}

<div>
   <span>This span is a direct child of the div.<br><span>This span is not a direct child of the div.</span></span><br>
   <span>This span is a direct child of the div.</span>
</div>

In the above example, only the direct descendants of the <div> will have their background color changed to green.

The result will look like this:

2. + (plus sign) selector

This is referred to as an adjacent selector. The CSS adjacent selector will select only the element that is immediately preceded by the former element.
Lets look at the following code:

h4 + p {
   background-color: green;
}

<h4>Adjacent Selector Example</h4>
<p>Paragraph number one should now have a green background.</p>
<p>Paragraph number two should have no affect.</p>
<p>Paragraph number three should have no affect.</p>

With the above example, the first paragraph will have its background changed to green, as it is the first <p> element preceded by the <h4> element.

The result will look like this:

Adjacent Selector Example

Paragraph number one should now have a green background.

Paragraph number two should have no affect.

Paragraph number three should have no affect.

3. ~ (tilde) selector

This is referred to as an general selector. This selector is similar to the ‘Adjacent Selector’ (+ sign), however, it is less strict. While an adjacent selector will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select any <p> elements, as long as they follow a <h4>, as in the example below.

h4 ~ p {
   background-color: green;
}

<h4>General Selector Example</h4>
<p>Paragraph number one should now have a green background.</p>
<p>Paragraph number two will also have a green background.</p>
<p>Paragraph number three will also have a green background.</p>

So with this selector, as mentioned very similar to the adjacent selector, will select every <p> element that follows the <h4>.

The result will look like this:

General Selector Example

Paragraph number one should now have a green background.

Paragraph number two will also have a green background.

Paragraph number three will also have a green background.

Well that’s it for this post, I hope you now have an understanding on how these selectors work, they can be a bit confusing to start with, but once you learn how to use them correctly, these selectors can become very powerful to use in your CSS code.