copypet.jpでも実は頻繁に登場する擬似クラス。
リストやブロックなどループで要素を設定している時に、◯番目だけ違うデザインを当てたいんだけど、いちいちクラスを設定してその都度クラスを指定するのって何度もやるとイライラするのよねぇ。って時や、チェックが入っている時だけこのデザインにしたい！なんてことってよくありませんか？
これ擬似クラスを使うとわりとチャチャっとできちゃいます。
擬似クラスって何よ？って思った方もいるかと思いますが、身近な擬似クラスといえば「:hover」です。よく使ってるでしょ？
擬似クラスを使えるようになってデザインやカスタマイズの幅を広げましょう。
擬似クラスはセレクターに追加するキーワードで、セレクターとして選択された要素（タグの塊）に対して特定の状態を指定することができるものです。
で？そもそも擬似要素の::before(:before)と::after(:after)って何がどうなってどう使えるの？ | copypet.jp｜パーツで探す、web制作に使えるコピペサイト。
copypet.jpでも頻繁に使っている擬似要素の::before(:before)と::after(:after)ですが、コピペだけしていると調整やプラスアルファのデザインを加えたい時に悩んでしまうこともあるでしょう。 とりあえずコピペすりゃええと思うが、だがしかし・・・何がどうなっているかは知っておきたい。とこっそり思っておられる方のために「何とな〜くわかる」から「知ってる！知ってる！」ぐらいになるよう説明しておきます。…
リンク周りでよく使う擬似クラスは以下の3つが多いと思います。css初心者でもこれは使ったことがあるでしょう。
特に装飾などで使えるのは「:hover」ですね。
<a href="#">リンク</a>a:link {
background: #FFAB91;
}
a:visited {
background: #90CAF9;
}
a:hover {
background: #A5D6A7;
}リンク先が未訪問なら背景がオレンジ色さらに、マウスホバーで背景が緑色
リンク先が訪問済みなら背景が水色さらに、マウスホバーで背景がピンク色
というように条件が重なる場合があります。
そんな時は、リンク先が未訪問か訪問済みかを指定後ホバーを指定します。
<a href="#">リンク</a>a:link {
/*リンク先未訪問*/
background: #FFAB91;
}
a:link:hover {
/*リンク先未訪問の時のホバー*/
background: #A5D6A7;
}
a:visited {
/*リンク先訪問済み*/
background: #90CAF9;
}
a:visited:hover {
/*リンク先訪問済みの時のホバー*/
background: #F8BBD0;
}「button」や「input」などフォーム周りでよく使う擬似クラスはこちらの4種
基本的には、「:checked」「:focus」の2つかと思います。
ラジオボタンやチェックボックス・セレクトボックスなどの要素がチェックされている状態の時を指定できます。
<input type="radio" name="cp_input" id="yes">
<label for="yes">Yes</label>
<input type="radio" name="cp_input" id="no">
<label for="no">No</label>
<input type="checkbox" name="cp_checkbox" id="check">
<label for="check">Check!</label>input[type="radio"]:checked + label {
background: #FFAB91;
}
input[type="checkbox"]:checked + label {
background: #90CAF9;
}フォーカスを持っている要素（inputなど）がフォーカスされた状態（選択された時）を指定できます。
<input type="text" placeholder="Textfield" />input[type="text"] {
background: #90CAF9;
border: 0;
}
input[type="text"]:focus {
background: #FFAB91;
outline: 0;
}入力フォームなどで入力や選択ができない状態の時を指定できます。
<input type="text" placeholder="入力・選択不可のTextfield" disabled>input[type="text"]:disabled {
background: #E0E0E0;
cursor:not-allowed;
}入力フォームなどで必須項目が設定されているものに対して指定できます。
<input type="text" placeholder="必須のTextfield" required>input[type="text"] {
background: #90CAF9;
border: 0;
}
input[type="text"]:required {
background: #FFCCBC;
}ちなみに「button」や「input」などフォーム周りを装飾する時は、デフォルトのデザインをクリアにしておくと装飾しやすくなりますよ。
ここでクリアしているものは基本的に使うであろうものだけをまとめています。
ラジオボタンやチェックボックスはデフォルトを全て消してラベルでデザインすることがほとんどですがここでは割愛させていただきます。
input[type="text"],
input[type="password"],
button,
textarea,
select {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
outline: none;
background: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input:focus,
textarea:focus {
outline: none;
}copypet.jpの「:checked」や「:focus」を利用して装飾したものをご紹介しています。
「3番目だけ色を変えたい」「最初の行だけ太字にしたい」などn番目のみ何かを設定したい場合って以外と多いですよね。
一つ一つclassをつけていけばできるっちゃできるんですが、まぁ面倒だし、つけ忘れるし。。。
もちろんcmsなどを利用していると吐き出されるhtmlソースには手をつけられなかったりもしますね。
そんな時に使える擬似クラスです。
兄弟要素のグループの中で最初の要素を指定します。
[div class="div_blok1"]内の1行目の[p]テキスト
[div class="div_blok1"]内の2行目の[p]テキスト
[div class="div_blok1"]内の3行目の[p]テキスト
ここまでクラス名[div_blok1]のdiv↑<div class="div_blok1">
<p>[div_blok1]内の1行目の[p]テキスト</p>
<p>[div_blok1]内の2行目の[p]テキスト</p>
<p>[div_blok1]内の3行目の[p]テキスト</p>
</div>
<div class="div_blok2">
<ul>
<li>[div_blok2]内の1行目の[li]テキスト</li>
<li>[div_blok2]内の2行目の[li]テキスト</li>
<li>[div_blok2]内の3行目の[li]テキスト</li>
</ul>
</div>.div_blok1 p {
background: #90CAF9;
}
.div_blok1 p:first-child {
background: #FFCCBC;
}
.div_blok2 li {
background: #A5D6A7;
}
.div_blok2 li:first-child {
background: #F8BBD0;
}
1行目の[p]テキスト ここだけ水色にしたいのに...
2行目の[p]テキスト
3行目の[p]テキスト
<div class="div_blok3">
<h2>[div_blok3]内の1行目の[h2]テキスト</h2>
<p>[div_blok3]内の1行目の[p]テキスト</p>
<p>[div_blok3]内の2行目の[p]テキスト</p>
<p>[div_blok3]内の3行目の[p]テキスト</p>
</div>.div_blok3 p {
background: #FFCCBC;
}
.div_blok3 p:first-child {
background: #90CAF9;
}兄弟要素のグループの中でその種類の最初の要素を指定します。
入れ子になっていても[div_blok1]のなかの最初の[p]だけが水色になる1行目の[p]テキスト ここだけ水色にしたい
2行目の[p]テキスト
3行目の[p]テキスト
<div class="div_blok1">
<h2>[div_blok1]内の1行目の[h2]テキスト</h2>
<p>[div_blok1]内の1行目の[p]テキスト</p>
<p>[div_blok1]内の2行目の[p]テキスト</p>
<p>[div_blok1]内の3行目の[p]テキスト</p>
</div>.div_blok1 p {
background: #FFCCBC;
}
.div_blok1 p:first-of-type {
background: #90CAF9;
}兄弟要素のグループの中でその種類の最後の要素を指定します。
[div class="div_blok1"]内の1行目の[p]テキスト
[div class="div_blok1"]内の2行目の[p]テキスト
[div class="div_blok1"]内の3行目の[p]テキスト
ここまでクラス名[div_blok1]のdiv↑<div class="div_blok1">
<p>[div_blok1]内の1行目の[p]テキスト</p>
<p>[div_blok1]内の2行目の[p]テキスト</p>
<p>[div_blok1]内の3行目の[p]テキスト</p>
</div>
<div class="div_blok2">
<ul>
<li>[div_blok2]内の1行目の[li]テキスト</li>
<li>[div_blok2]内の2行目の[li]テキスト</li>
<li>[div_blok2]内の3行目の[li]テキスト</li>
</ul>
</div>.div_blok1 p {
background: #90CAF9;
}
.div_blok1 p:last-child {
background: #FFCCBC;
}
.div_blok2 li {
background: #A5D6A7;
}
.div_blok2 li:last-child {
background: #F8BBD0;
}ただし「:last-child」を設定した要素の最後のアイテムAよりも後に他の要素がある場合は適応されません。
「p:last-child」の場合、アイテムAは[p]となります。
本来[p]の最後行だけ水色にし、それ以外は水色にしたいのですが、最後行に[h2](指定している[p]以外)があるため適応されません。
こんな時は「:last-of-type」へ。
[p]1行目のテキスト
[p]2行目のテキスト
[p]最後行のテキスト ここだけ水色にしたいのに...
<div class="div_blok3">
<p>[div_blok3]内の1行目の[p]テキスト</p>
<p>[div_blok3]内の2行目の[p]テキスト</p>
<p>[div_blok3]内の3行目の[p]テキスト</p>
<h2>[div_blok3]内の1行目の[h2]テキスト</h2>
</div>.div_blok3 p {
background: #FFCCBC;
}
.div_blok3 p:first-child {
background: #90CAF9;
}兄弟要素のグループの中でその種類の最後の要素を指定します。
入れ子になっていても[div_blok1]のなかの最後の[p]だけが水色になる[p]1行目のテキスト
[p]2行目のテキスト
[p]最後行のテキスト ここだけ水色にしたい
<div class="div_blok1">
<p>[div_blok1]内の1行目の[p]テキスト</p>
<p>[div_blok1]内の2行目の[p]テキスト</p>
<p>[div_blok1]内の3行目の[p]テキスト</p>
<h2>[div_blok1]内の1行目の[h2]テキスト</h2>
</div>.div_blok1 p {
background: #FFCCBC;
}
.div_blok1 p:last-of-type {
background: #90CAF9;
}:first-childの場合
まずは並び順をみて、一番上の要素が指定した要素と一緒かどうかをみます。なので一番上に一致する要素が無いと「cssが効かない」ということになります。
:first-of-typeの場合
逆に、指定した要素だけを数えて最初のアイテムとなります。なので、「:first-child」で効かなかったものが効くようになります。
要素関係なく上から（下から）何番目を指定したいときは「***-child」、要素を限定して上から（下から）何番目を指定したいときは「***-of-type」ということになります。
:nth-child()も:nth-last-child()兄弟要素のグループの中での位置に基づいて選択です。
:nth-child()は最初から数え、:nth-last-child()最後から数えます。
odd:奇数番目の要素
:nth-child(odd)は:nth-child(2n+1)と同様です。
even:偶数番目の要素
:nth-child(even)は:nth-child(2n)と同様です。
1つ目の[p] 奇数なので水色
2つ目の[p] 偶数なのでオレンジ色
3つ目の[p] 奇数なので水色
4つ目の[p] 偶数なのでオレンジ色
1つ目の[span] 奇数なので水色<div class="div_blok1">
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>.div_blok1 :nth-child(odd) {
background: #90CAF9;
}
.div_blok1 :nth-child(even) {
background: #FFCCBC;
}1つ目の[p]
2つ目の[p]
3つ目の[p]
4つ目の[p]
1つ目の[span]<div class="div_blok1">
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>.div_blok1 :nth-child(3) {
background: #90CAF9;
}1つ目の[p]
2つ目の[p]
3つ目の[p]
4つ目の[p]
1つ目の[span] 上から数えて9番目なのでオレンジ色<div class="div_blok1">
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>.div_blok1 :nth-child(3n) {
background: #FFCCBC;
}1つ目の[p]
2つ目の[p]
3つ目の[p] 水色
4つ目の[p]
1つ目の[span] 水色5つ目の[p]
6つ目の[p] 水色
<div class="div_blok1">
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>.div_blok1 :nth-child(3n+4) {
background: #90CAF9;
}1つ目の[p] オレンジ色
2つ目の[p] オレンジ色
3つ目の[p] オレンジ色
4つ目の[p]
1つ目の[span]5つ目の[p]
6つ目の[p]
<div class="div_blok1">
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>.div_blok1 :nth-child(-n+4) {
background: #FFCCBC;
}1つ目の[p]
1つ目の[span]2つ目の[p] 上から3〜6番以内なのでオレンジ色
3つ目の[p] 上から3〜6番以内なのでオレンジ色
4つ目の[p] 上から3〜6番以内なのでオレンジ色
5つ目の[p]
<div class="div_blok1">
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>.div_blok1 :nth-child(n+3):nth-child(-n+6) {
background: #FFCCBC;
}「***-of-type」なのでいずれも指定した要素だけを数えてから位置に基づいた要素に反映されます。
:nth-of-type()は最初から数え、:nth-last-of-type()は最後から数えます。
odd:奇数番目の要素
:nth-of-type(odd)は:nth-of-type(2n+1)と同様です。
even:偶数番目の要素
:nth-of-type(even)はtr:nth-of-type(2n)と同様です。
1つ目の[p] [p]で奇数なので水色
1つ目の[span] [p]じゃないので無色2つ目の[p] [p]で偶数なのでオレンジ色
3つ目の[p] [p]で奇数なので水色
4つ目の[p] [p]で偶数なのでオレンジ色
5つ目の[p] [p]で奇数なので水色
<div class="div_blok1">
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>.div_blok1 p:nth-of-type(odd) {
background: #90CAF9;
}
.div_blok1 p:nth-of-type(even) {
background: #FFCCBC;
}1つ目の[p]
2つ目の[p]
3つ目の[p] これだけ水色
4つ目の[p]
1つ目の[span]<div class="div_blok1">
<p>テキスト</p>
<p>テキスト</p>
<div>テキスト</div>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
<p>テキスト</p>
</div>.div_blok1 p:nth-of-type(3) {
background: #90CAF9;
}1つ目の[p]
2つ目の[p]
3つ目の[p] オレンジ色
4つ目の[p]
1つ目の[span]5つ目の[p]
6つ目の[p] オレンジ色
7つ目の[p]
8つ目の[p]
2つ目の[span]9つ目の[p] オレンジ色
10個目の[p]
<div class="div_blok1">
<p>テキスト</p>
<p>テキスト</p>
<div>テキスト</div>
<p>テキスト</p>
<div>テキスト</div>
<p>テキスト</p>
<span>テキスト</span>
<p>テキスト</p>
<p>テキスト</p>
<span>テキスト</span>
<div>テキスト</div>
<p>テキスト</p>
<p>テキスト</p>
<div>テキスト</div>
<p>テキスト</p>
<p>テキスト</p>
</div>.div_blok1 p:nth-of-type(3n) {
background: #FFCCBC;
}1つ目の[p]
2つ目の[p]
3つ目の[p]
4つ目の[p] 水色
1つ目の[span]5つ目の[p]
6つ目の[p]
7つ目の[p] 水色
8つ目の[p]
2つ目の[span]9つ目の[p]
10個目の[p] 水色
<div class="div_blok1">
<p>テキスト</p>
<p>テキスト</p>
<div>テキスト</div>
<p>テキスト</p>
<div>テキスト</div>
<p>テキスト</p>
<span>テキスト</span>
<p>テキスト</p>
<p>テキスト</p>
<span>テキスト</span>
<div>テキスト</div>
<p>テキスト</p>
<p>テキスト</p>
<div>テキスト</div>
<p>テキスト</p>
<p>テキスト</p>
</div>.div_blok1 p:nth-of-type(3n+4) {
background: #90CAF9;
}1つ目の[p] オレンジ色
2つ目の[p] オレンジ色
3つ目の[p] オレンジ色
4つ目の[p] オレンジ色
1つ目の[span]5つ目の[p]
6つ目の[p]
7つ目の[p]
8つ目の[p]
2つ目の[span]9つ目の[p]
10個目の[p]
<div class="div_blok1">
<p>テキスト</p>
<p>テキスト</p>
<div>テキスト</div>
<p>テキスト</p>
<div>テキスト</div>
<p>テキスト</p>
<span>テキスト</span>
<p>テキスト</p>
<p>テキスト</p>
<span>テキスト</span>
<div>テキスト</div>
<p>テキスト</p>
<p>テキスト</p>
<div>テキスト</div>
<p>テキスト</p>
<p>テキスト</p>
</div>.div_blok1 p:nth-of-type(-n+4) {
background: #FFCCBC;
}1つ目の[p]
2つ目の[p]
3つ目の[p] オレンジ色
4つ目の[p] オレンジ色
1つ目の[span]5つ目の[p] オレンジ色
6つ目の[p] オレンジ色
7つ目の[p]
8つ目の[p]
2つ目の[span]9つ目の[p]
10個目の[p]
<div class="div_blok1">
<p>テキスト</p>
<p>テキスト</p>
<div>テキスト</div>
<p>テキスト</p>
<div>テキスト</div>
<p>テキスト</p>
<span>テキスト</span>
<p>テキスト</p>
<p>テキスト</p>
<span>テキスト</span>
<div>テキスト</div>
<p>テキスト</p>
<p>テキスト</p>
<div>テキスト</div>
<p>テキスト</p>
<p>テキスト</p>
</div>.div_blok1 p:nth-of-type(n+3):nth-of-type(-n+6) {
background: #FFCCBC;
}兄弟要素がない要素を表します。親グループの中に子要素が一つしかないものに対して適用させることができます。
1つ目の[p] 同じグループに他にも要素があるので無色
2つ目の[div] の中の唯一の[p] 2つ目の[div]グループ内に他に要素がないので水色
<div class="div_blok1">
<p>テキスト</p>
<div>テキスト</div>
<div>テキスト
<p>テキスト</p>
</div>
<div>テキスト
<span>テキスト</span>
</div>
</div>.div_blok1 :only-child {
background: #90CAF9;
}同じ型の兄弟要素がない要素を表します。つまりグループのなかで唯一の要素を探して適用させることができます。
唯一の[p]なのでオレンジ色
<div class="div_blok1">
<div>テキスト</div>
<p>テキスト</p>
<div>テキスト</div>
<div>テキスト
<i>テキスト</i>
<em>テキスト</em>
<em>テキスト</em>
</div>
</div>.div_blok1 :only-of-type {
background: #FFCCBC;
}セレクターに一致しない要素を表す（「それ以外」を指定できる）
sampleでは[p(classが.blue)]は水色それ以外の[p]は緑色[p]以外はオレンジ色になります。
ブラウザ対応：https://caniuse.com/#search=not()
pのclassなしテキスト1 緑色
pのclassなしテキスト2 緑色
class="blue"のついたpのテキスト3 水色
<div class="div_blok1">
<p>pのclassなしテキスト1 緑色</p>
<p>pのclassなしテキスト2 緑色</p>
<div>divのテキスト pでは無いのでオレンジ色</div>
<p class="blue">class="blue"のついたpのテキスト3 水色</p>
</div>.div_blok1 p.blue {
background: #90CAF9;
}
.div_blok1 p:not(.blue) {
background: #A5D6A7;
}
.div_blok1 :not(p) {
background: #FFCCBC;
}:in-rangeは現在の値が min および max 属性による制限範囲内である「input」要素を表します。
:out-of-rangeは現在の値が min および max 属性による制限範囲外である「input」要素を表します。
sampleは1〜10までは水色にそれ以外はオレンジ色になります。
ブラウザ対応がOKなら今までjsでやっていたことがこれだけでできるんですけどね。
ブラウザ対応：https://caniuse.com/#search=in-range
<input id="value" type="number" placeholder="1〜10なら水色それ以外はオレンジ色" min="1" max="10" value="">
<label for="value"></label>
input:in-range {
background: #90CAF9;
}
input:out-of-range {
background: #FFCCBC;
}
input:in-range + label::after {
content: '範囲内';
}
input:out-of-range + label::after {
content: '範囲外';
}URL のフラグメントに一致する id を持つ固有の要素を表します。
sampleではリンクをクリックするとターゲットとなるidをもつ要素に水色がつきます。
作り方によっては、モーダルウィンドウなどの表現も可能ですね。
ただし、スムーズスクロールなどのjsを入れているとうまく動かなかったりしますのでお気をつけください。
ブラウザ対応：https://caniuse.com/#search=%3Atarget
といった具合で、cssを適用したい条件をパターン化して整理すれば、いちいち設定するよりも早く適用させることができますね。みなさんも色々試してみてはいかがでしょう？ 
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info