便利なCSSセレクタをまとめてみました！
特に属性セレクタについては使い慣れると様々な使い方ができてとっても便利なのでマスターしてくださいね！

疑似要素については記事がありますので、そちらを確認してください
【初心者向け：疑似要素・疑似クラスの種類と基本的な使い方】

*

全ての要素に適用します

*{
	color:#f00;
}

A > B

親要素直下の子に適用します

div > p{
	color:#f00;
}

A + B

隣接している要素に適用します

div + p{
	color:#f00;
}

A ~ B

「A」要素の後に出てくる「B」に適用します

h1 ~ p{
	color:#f00;
}

<p>適用しません。</p>
<h1>見出しです</h1>
<p>適用します。</p>
<p>適用します。</p>
<p>適用します。</p>

属性セレクタ

属性【例】id,class,href,titleなどなど・・
文言はclass名や文言など適用させたいものを入れます。

A[(属性)]

属性を持つ要素に適用します

p[class]{
	color:#f00;
}

<p>適用しません。</p>
<p class="aaa">適用します。</p>
<p class="bbb">適用します。</p>
<p class="eee">適用します。</p>

A[(属性)^="(文言)"]

指定属性の文言が前方一致していれば適用されます

p[class^="title-"]{
	color:#f00;
}

<p>適用しません。</p>
<p class="title-01">適用します。</p>
<p class="title-02">適用します。</p>
<p class="title-03">適用します。</p>

A[(属性)$="(文言)"]

指定属性の文言が後方一致していれば適用されます

p[class$="image"]{
	color:#f00;
}

<p>適用しません。</p>
<p class="01-image">適用します。</p>
<p class="02-image">適用します。</p>
<p class="03-image">適用します。</p>

A[(属性)*="(文言)"]

指定属性の文言が部分一致していれば適用されます

p[class*="dot"]{
	color:#f00;
}

<p class="nanana">適用しません。</p>
<p class="01-dot">適用します。</p>
<p class="dot-stripe">適用します。</p>
<p class="dot">適用します。</p>