cssでの色々な指定方法

授業ではjqueryを使ってハンバーガーメニューを作成しましたが、jqueryを使わずにcssのみでも作成出来ます。ただ要素の使い方が非常に癖があり、これはこれで解り辛さがあります。
また、細かい要素の指定方法が必要になるので、

「~」で同じ階層の後ろに並ぶ要素に適用

<p>適用されない</p>
<p class="example">適用されない</p>
<p>適用される</p>
<p>適用される</p>

css

example ~ p {
  color: red;
}

「+」で同じ階層のすぐ後の要素にのみ適用

<p>適用されない</p>
<p class="example">適用されない</p>
<p>適用される</p>
<p>適用されない</p>

css

.example + p {
  color: red;
}