セレクタや疑似要素などの使い方を忘れがちなのでメモとして残します。
隣接する直後の要素にのみ適用（h4 + p {…}）
この例だとh4の直後にあるpだけに適用できる。もちろん階層が違ったりすると不可。
h4 + p {
color: red; }<p>1つめのpの内容</p>
<p>2つめのpの内容</p>
<h4>対象のh4内容</h4>
<p>h4直後のpの内容</p>
<p>4つめのpの内容</p>1つめのpの内容
2つめのpの内容
対象のh4内容
h4直後のpの内容
4つめのpの内容
後にある同一階層の要素に適用（h4 ~ p {…}）
後ろにある同一階層の要素全てに適用される。
h4 ~ p {
color: red; }<h4>対象のh4内容</h4>
<p>1つめのpの内容</p>
<p>2つめのpの内容</p>
<div>
<p>3つめのpの内容</p>
</div>
<p>4つめのpの内容</p>対象のh4内容
1つめのpの内容
2つめのpの内容
3つめのpの内容
4つめのpの内容
直下の同一階層にある要素に適用（div > a {…}）
div.test3 > a {
color: red; }<div class="test3">
<a href="#">リンク1</a>
<ul>
<li><a href="#">リンク2</a></li>
</ul>
<a href="#">リンク3</a>
</div>
最初の要素に適用（p:first-child {…}）
div.test4 p:first-child {
color: red; }<div class="test4">
<p>1つめのpの内容</p>
<p>2つめのpの内容</p>
<p>3つめのpの内容</p>
<p>4つめのpの内容</p>
</div>1つめのpの内容
2つめのpの内容
3つめのpの内容
4つめのpの内容
n番目に現れる指定した要素に適用（p:nth-child(n) {…}）
div.test5 p:nth-child(4) {
color: red; }<div class="test5">
<h4>h4見出し</h4>
<h5>h5見出し</h5>
<p>1つめのpの内容</p>
<p>2つめのpの内容</p>
<p>3つめのpの内容</p>
<p>4つめのpの内容</p>
</div>h4見出し
h5見出し
1つめのpの内容
2つめのpの内容
3つめのpの内容
4つめのpの内容
指定した要素のn番目に適用（p:nth-of-type(n) {…}）
div.test6 p:nth-of-type(3) {
color: red; }<div class="test6">
<p>1つめのpの内容</p>
<p>2つめのpの内容</p>
<p>3つめのpの内容</p>
<p>4つめのpの内容</p>
</div>1つめのpの内容
2つめのpの内容
3つめのpの内容
4つめのpの内容
指定した要素の後ろからn番目に適用（p:nth-last-of-type(n) {…}）
div.test7 p:nth-last-of-type(1) {
color: red; }<div class="test7">
<p>1つめのpの内容</p>
<p>2つめのpの内容</p>
<p>3つめのpの内容</p>
<p>4つめのpの内容</p>
</div>1つめのpの内容
2つめのpの内容
3つめのpの内容
4つめのpの内容
コメント