【CSS】セレクターその２ 擬似セレクター

こばゆた

前回に引き続きセレクター編「その２」です。

こばゆた

今回は「擬似セレクター」と呼ばれるものを紹介していきます

少しややこしい部分もありますが使えるようになると細かいところまでスタイリングが届くようになると思うのでぜひ身に付けましょう

今回の内容

1.擬似セレクター
2.まとめ

1.擬似セレクター

擬似セレクターとは単体では指定できない状態を要素の後に:(コロン)を付ける事で擬似的に指定し細かく、狭い範囲を指定できるようにするものです。

1-1.否定擬似セレクター

要素の後ろに:notをつけて( )に除外する条件を書いて指定します。

要素:not( ){
 プロパティ: 値;
}

きなこ

notだから「それじゃない」ってことね

id=”first”以外のものを指定してみます。

<ul>
　<li id="first">テキストテキストテキスト</li>
　<li id="second">テキストテキストテキスト</li>
　<li id="third">テキストテキストテキスト</li>
　<li id="fourth">テキストテキストテキスト</li>
</ul>

“li:not(#first)”で指定します。

li:not(#first){
  color: red;
}
/*li要素のid="first"以外の要素の文字色を赤にする*/

テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト

変更

id=”first”以外が指定されました。

前に要素を書かかずに”:not”から始めることもできます。

<ul>
　<li id="first">テキストテキストテキスト</li>
　<li id="second">テキストテキストテキスト</li>
　<li id="third">テキストテキストテキスト</li>
　<li id="fourth">テキストテキストテキスト</li>
</ul>

:not(#third,#fourth){
  color: red;
}
/*id="third","fourth"以外の要素の文字色を赤にする*/

テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト

変更

ちゃんとid=”third”,id=”fourth”以外の要素が指定されています。

1-2.empty擬似セレクター

子要素やテキストを含まない要素、つまり空欄を指定します。

要素:empty{
 プロパティ: 値;
}

<ul>
　<li id="first">テキストテキストテキスト</li>
　<li id="second"></li>
　<li id="third">テキストテキストテキスト</li>
　<li id="fourth">テキストテキストテキスト</li>
　<li id="fifth"> (半角スペース)</li>
　<li id="sixth">テキストテキストテキスト</li>
<ul>

li:empty{
 background-color: red;
}
/*li要素の空欄の要素の背景色を赤にする*/

テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト

見た目だけでいくと２番目と５番目のli要素が空なのでそこが選択されると思いきや２番目のみが選択されています。

これはemptyセレクターが半角空白や改行があると空白とみなされないという性質があるためでその結果２番目のみが選択されています。

こばゆた

本当に空白じゃないと反応しないということです

1-3.nth-child擬似セレクター

nth-child(n)はn番目の子要素という意味で、(n)の中に指定したい番号を入れて指定をします。

要素:nth-child(n){
 プロパティ: 値;
}
/*n番目の要素を指定する*/

li要素の3番目にスタイルを当てたいとします。

<ol>
  <li>テキストテキストテキスト</li>
  <li>テキストテキストテキスト</li>
  <li>テキストテキストテキスト</li>
  <li>テキストテキストテキスト</li>
</ol>

( )の中に”3″を入れる事で3番目のみにスタイルが効きます。

li:nth-child(3){
  color: red;
}
/*li要素の3番目の要素の文字色を赤にする*/

テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト

変更

またnの前に数字を記入する事で倍数順で指定もできます。

3nとしてみると

li:nth-child(3n){
  color: red;
}
/*li要素の3の倍数の要素の文字色を赤にする*/

テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト

変更

3の倍数である3番目と6番目のli要素にスタイルが効いています。

さらに( )内に”odd”や”even”を書き加える事で奇数番目と偶数番目の指定をする事ができます。

要素:nth-child(odd){
 プロパティ: 値;
}
/*奇数番目の要素を指定する*/

要素:nth-child(even){
 プロパティ: 値;
}
/*偶数番目の要素を指定する*/

テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト

奇数

偶数

1-4.first-child/last-child擬似セレクター

first-child擬似セレクターは最初の要素を指定でき、last-child擬似セレクターは最後の要素を指定できます。

要素:first-child{
 プロパティ: 値;
}

要素:last-child{
 プロパティ: 値;
}

<ul>
　<li>テキストテキストテキスト</li>
　<li>テキストテキストテキスト</li>
　<li>テキストテキストテキスト</li>
　<li>テキストテキストテキスト</li>
</ul>

li:first-child{
 color: red;
}
/*li要素の最初に登場する要素の文字色を赤にする*/
 
li:last-child{
 color: blue;
}
/*li要素の最後に登場する要素を青にする*/

テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト

first-child

last-child

1-5.nth-last-childセレクター

要素の後ろから数えてn番目を指定します。

要素:nth-last-child(n){
 プロパティ: 値;
}

li要素の最後から3番目の要素を取得します。

<ul>
　<li>テキストテキストテキスト</li>
　<li>テキストテキストテキスト</li>
　<li>テキストテキストテキスト</li>
　<li>テキストテキストテキスト</li>
</ul>

li:nth-last-child(3){
  color: red;
}
/*li要素の最後から3番目の要素の文字色を赤にする*/

テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト

下から3番目の要素が指定されています。

こばゆた

last-childとnth-last-childとの混同に注意です。

1-6.nth-of-type擬似セレクター

nth-of-type(n)は指定した要素内で指定された番号の要素を指定します。

要素:nth-of-type(n){
 プロパティ: 値;
}

3番目のdt要素を指定したいとします。

<dl>
  <dt>質問1</dt>
  <dd>答え1</dd>
  <dt>質問2</dt>
  <dd>答え2</dd>
  <dt>質問3</dt> <!--ここを指定したい-->
  <dd>答え3</dd>
  <dt>質問4</dt>
  <dd>答え4</dd>
</dl>

dt要素内で3番目ということで( )に”3″を入れます。

dt:nth-of-type(3){
  color: red;
}
/*3番目のdt要素の文字色を赤にする*/

質問1: 答え1
質問2: 答え2
質問3: 答え3
質問4: 答え4

このような感じで使います。

ではnth-child( )と何が異なるのかと疑問に思いますが、異なるのはnth-child( )が全ての兄弟要素内を数えるのに対し、nth-of-type( )は指定された要素内のみを数えるという違いがあります。

コチラの例でみてみます。

dt:nth-child(3){
  color: red;
}
/*兄弟要素の中で3番目*/

dt:nth-of-type(3){
  color: blue;
}
/*dt要素の中で3番目*/

質問1: 答え1
質問2: 答え2
質問3: 答え3
質問4: 答え4

nth-child

nth-of-type

nth-child( )は全ての兄弟要素内の3番目、nth-of-type( )はdt要素内の3番目になっています。

ちなみに最初の例も強引にnth-child( )でやろうとするならば全ての兄弟要素の中で5番目なので( )に5を入れるとできます。

dt:nth-child(5){
  color: red;
}

質問1: 答え1
質問2: 答え2
質問3: 答え3
質問4: 答え4

nth-of-type( )の使い所としては他の要素と入り混じっている時などに「3番目のp要素の色を変えたいなぁ」とかと思ったら使います。また(2n)などとすると2の倍数を指定できます。

<div>
　<div>divのテキスト1</div>
　<p>p要素のテキスト1</p>
　<p>p要素のテキスト2</p>
　<p>p要素のテキスト3</p>
　<div>div要素のテキスト2</div>
　<div>div要素のテキスト3</div>
　<p>p要素のテキスト4</p>
　<p>p要素のテキスト5</p>
　<p>p要素のテキスト6</p>
</div>

p:nth-of-type(3){
 color: red;
}

p:nth-of-type(2n){
 color: blue;
}

p:nth-child(3){
 color: plum;
}

p:nth-child(2n){
 color: orange;
}

divのテキスト1

p要素のテキスト1

p要素のテキスト2

p要素のテキスト3

div要素のテキスト2

div要素のテキスト3

p要素のテキスト4

p要素のテキスト5

p要素のテキスト6

p:nth-of-type(3)

p:nth-of-type(2n)

p:nth-child(3)

p:nth-child(2n)

ちなみにこちらも( )に偶数ならeven,奇数ならoddを入れるとそれぞれ指定する事ができます。

要素:nth-of-type(even){
 プロパティ: 値;
}

要素:nth-of-type(odd){
 プロパティ: 値;
}

p:nth-of-type(odd){
 color: red;
}
/*p要素の奇数番目に登場する要素を赤にする*/

p:nth-of-type(even){
 color: blue;
}
/*p要素の偶数番目に登場する要素を青にする*/

divのテキスト1

p要素のテキスト1

p要素のテキスト2

p要素のテキスト3

div要素のテキスト2

div要素のテキスト3

p要素のテキスト4

p要素のテキスト5

p要素のテキスト6

奇数

偶数

1-7.first-of-type/last-of-type擬似セレクター

nth-child( )と似たようにfirst-of-type,last-of-typeもあり、こちらも最初(または最後)の子要素を指定することができます。

要素:first-of-type{
 プロパティ: 値;
}
/*指定したセレクターの最初に登場する要素を指定する*/

要素:last-of-type{
 プロパティ: 値;
}
/*指定したセレクターの最後に登場する要素を指定する*/

p:first-of-type{
 color: red;
}
/*p要素の最初に登場する要素を赤にする*/

p:last-of-type{
 color: blue;
}
/*p要素の最後に登場する要素を青にする*/

divのテキスト1

p要素のテキスト1

p要素のテキスト2

p要素のテキスト3

div要素のテキスト2

div要素のテキスト3

p要素のテキスト4

p要素のテキスト5

p要素のテキスト6

first-of-type

last-of-type

2.まとめ

セレクターの指定その２まとめ

<div>
　<div>divのテキスト1</div>
　<p>p要素のテキスト1</p>
　<p>p要素のテキスト2</p>
　<p>p要素のテキスト3</p>
　<div>div要素のテキスト2</div>
　<div>div要素のテキスト3</div>
　<p>p要素のテキスト4</p>
　<div><!--空欄--></div>
　<p>p要素のテキスト5</p>
　<p>p要素のテキスト6</p>
</div>

divのテキスト1

p要素のテキスト1

p要素のテキスト2

p要素のテキスト3

div要素のテキスト2

div要素のテキスト3

p要素のテキスト4

p要素のテキスト5

p要素のテキスト6

:not(div)

div:empty

p:nth-child(3)

div:first-child

div:nth-of-type(3)

p:nth-last-child(2)

否定擬似セレクター /*( )内に除外する条件を入れて指定*/
:not(div){
  color: red; 
}
/*div要素以外を赤にする*/

empty擬似セレクター /*空の要素を指定*/
div:empty{
  background-color: yellow; 
}
/*空のdiv要素の背景を黄色にする*/

nth-child(n)擬似セレクター /*兄弟要素内(全ての要素内)の指定された番号を指定*/
p:nth-child(3){
 color: skyblue; 
}
/*兄弟要素内の3番目にあるp要素をスカイブルーにする*/


first-child/last-child擬似セレクター /*指定された要素の最初の要素を指定*/
div:first-child{
  color: plum; 
}
/*最初のdiv要素をプラム色にする*/

nth-of-type(n)擬似セレクター /*指定した要素内で指定された番号の要素を指定*/
div:nth-of-type(3){
  color: pink; 
}
/*3番目のdiv要素をピンクにする*/

nth-last-child(n)擬似セレクター /*指定した要素の最後から指定された番号の要素を指定*/
p:nth-last-child(2){
  color: lime; 
}
/*最後から2番目のp要素をライムにする*/

・(n)には数字意外にもnの前に数字を記入する事で倍数にしたり、even,oddを入れる事で奇数、偶数も指定できる。

	指定方法	指定するもの
否定擬似セレクター	:not( )	指定した要素以外の要素を指定
empty擬似セレクター	:empty	空欄の要素を指定(半角スペースや改行を除く)
nth-childセレクター	:nth-child(n)	n番目の要素を指定
first-child/last-childセレクター	：first-child/:last-child	最初または最後の要素を指定
nth-last-childセレクター	：nth-last-child(n)	最後から数えてn番目の要素を指定
nth-of-typeセレクター	nth-of-type(n)	要素内に絞ってn番目の要素を指定
first-of-type/last-of-typeセレクター	:first-of-type/:last-of-type	指定した要素の最初または最後の要素を指定