The element ~ siblings selector selects sibling elements that appear after the specified element. Both of the specified elements must share the same parent.The second specified element does NOT have to come DIRECTLY after the first specified element.

The element ~ element selector can be used along with the #id, .class, and any other selector.

// selects all HTML paragraphs that come after a div tag and live within the same parent
$('div ~ p')

---

To select multiple HTML elements with varying ids and classes, separate them with commas. The following will select 4 different elements based on their ID, class, or tag.

$('#intro, #footer, .my_paragraphs, h3')

To be more specific when selecting an HTML element, you can refer to the element and an ancestor element.

// all .child elements that live within a .father element
$('.father .child')

// all h1 tags that live within a .father element
$('.father h1')

Notice that there is no comma between the classes (but there is a space), which says you are targeting the class .child and it must have an ancestor with the class .father, as shown in the first example. You can include as many ancestors as necessary to be as specific as necessary.

// all p tags that live within a .child element that lives within a .father element
$('.father .child p')

---