【CSSで繰り返しブロックの余白設定に使えるセレクタ「+」】

こんなページがあったとします。
　

＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ヘッダー
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<section>ブロックA</section>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝　←ここ
<section>ブロックB</section>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝　←ここ
<section>ブロックC</section>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝　←ここ
<section>ブロックD</section>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝

「ここ」の３箇所だけCSSで余白を空けたい場合、
３通りの考え方があると思います。
　
＜方針１＞
A～D全部に上側の余白を設定し、Aのみ解除する。
　
section { margin-top: 30px; }
section:first-child { margin-top: 0; }
　
＜方針２＞
A～Dのうち最初のブロック以外に余白を設定する。
　
section:not(:first-child) { margin-top: 30px; }
　
＜方針３＞
同じブロックが連続した場合のみ余白を設定する。
　
section+section { margin-top: 30px; }
　
【解説】
どれも結果は同じです。
　
１は疑似クラス「:first-child」を利用して、
最初のブロックのみ余白の設定を解除しています。
　
２は１と同じことを疑似クラスの「:not」を使って
コンパクトに記述したものです。
　
「:first-child ではないもの」という意味ですね。
　
３は隣接セレクタ「+」を使って、
直前のsectionタグに続く次のsectionタグだけに
余白を設定するという考え方で、
最初のブロックだけはこのルールに該当しないので、
２つ目以降のブロックにだけ余白が設定されます。
　
　
CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
　
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
　
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
　
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価： 2,400円（税別）出版社：秀和システム
　
▼Amazon購入ページはこちら
http://amzn.to/2bXJkbs
　
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
　
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
　
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy