1. The subsequent-sibling combinator (~, a tilde) separates two selectors and matches all instances of the second element that follow the first element (not necessarily immediately) and share the same parent element

<div class="combinators">
    <p class="para1">Paragraph-1</p>
    <p class="para2">Paragraph-2</p>
    <p class="para3">Paragraph-3</p>
</div> 

.combinators {
    font-size: 1.4em;
}

.para1~p {
    background-color: lightgoldenrodyellow;
    text-align: center;
}

.para1+p {
    color: red;
    text-align: right;
} 

1. Note that in this case text-align:right takes precedence in para2 (but not para3) because the