Familiar selectors

Among the wide array of operators available in CSS there are two devoted to sibling selectors, to target HTML elements after the current one. The two are introduced with the plus and tilde character, and are inherently different in how they function. In the past, I might have argued that a visual would have been key to remember the difference, but in truth, just the two characters and what they evoke will suffice.

The plus character inspires mathematical rigor: only when the element immediately follows the reference node will the changes apply.

input:checked + span {
	/* ... */
}

The tilde character, on the other hand, inspires a mellow vibe: the element past the current one will be updated, whether it follows one or more steps.

input:checked ~ svg {
	/* ... */
}

Keep the characters in mind and you’ll always be able to find the rightful node. And if memory fails, why, there’s always a picture to help. You won’t need it, but you might delight in a reference for what will come next.