【CSSセレクター】自在に使いこなそう【> + ~[]】

指す場所：1階層下の子要素

書き方の例： .container > h2
↓
意味：containerクラスのついたdivタグの1階層下のh2タグ

指す場所：指定した要素と同じ階層かつ直後にある兄弟要素

書き方の例：h2.section-heading + p
↓
意味：section-headingクラスのついたh2タグの直後にある同じ階層のpタグ

指す場所：指定した要素以降に出てくる同じ階層の要素

書き方の例：h2.section-heading ~p
↓
意味：section-headingクラスのついたh2タグ以降にある同じ階層のpタグ

書き方の例：a[href*=”orange”]
↓
意味：「orange」が含まれるhref属性のあるaタグ

書き方の例：a[href^=”https”]
↓
意味：「https」で始まるhref属性のあるaタグ

書き方の例：a[href$=”.com”]
↓
意味：「.com」で終わるhref属性のあるaタグ