ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。
擬似クラスは数が多いので、まずは「構造擬似クラス」の覚書。他の擬似クラスは別ページで作成予定。
「擬似要素と擬似クラスの違いの覚書」と多少内容重複するかと思います。
擬似クラス(Pseudo-classes)の概要
擬似クラスは要素内全体に対してスタイルを適用する。
擬似クラスは擬似的にクラスを追加（生成）していると個人的には理解してます。
「擬似要素と擬似クラスの違いの覚書」参照。
CSS3までで勧告されている構造擬似クラスは以下の12個。似たようなのがたくさんです。
- :root疑似クラス
- :first-child疑似クラス
- :last-child疑似クラス
- :nth-child()疑似クラス
- :nth-last-child()疑似クラス
- :first-of-type疑似クラス
- :last-of-type疑似クラス
- :nth-of-type()疑似クラス
- :nth-last-of-type()疑似クラス
- :only-child疑似クラス
- :only-of-type疑似クラス
- :empty疑似クラス
:root疑似クラス
文書内のルート要素である要素にスタイルが適用される。
HTML文書だとルート要素はhtml要素になるようです。
htmlより:root方が優先度は上。選択範囲は一緒。
【CSS3】で定義された。
:root {
プロパティ: 値;
}
:root擬似クラスの使用例
:root擬似クラスの使用例をhtmlとcssと共に紹介。
html
<p>ダミーテキスト</p>
css
:root {
background-color: red;
}
body {
background-color: yellow;
}
実際の表示
最上位階層の要素に適用されるので、bodyよりも優先されています。
使いどころは、参照させていただいたサイトでもあまり無いように書かれていました。
CSS 3のセレクタ解説：:root、:not、:empty、:target
:first-child疑似クラスの概要
ある要素内で最初に書かれた子要素を対象にスタイルが適用されます。
:nth-child(1)と同じ扱い。
要素名:first-child {
プロパティ: 値;
}
:first-child疑似クラスの使用例
:first-child疑似クラスの使用例をhtmlとcssと共に紹介。
html
<ul>
<li>HOME</li>
<li>About</li>
<li>Blog</li>
</ul>
css
li {
display:block;
border-top:1px solid #000;
padding: 10px;
}
li:first-child {
border-top:none;
}
実際の表示
リストのそれぞれに上線を入れて最上部の線のみ消した例。
:first-childの間違いやすい記述
:first-childの間違いやすい記述というのが参照させていただいたサイトにあったので覚書として例を記述しておきます。
:first-child使用の失敗例
divの中に見出しタグとpタグがあった場合、p:first-childと記述して最初のpタグにスタイルを適用したくても、最初の要素はhタグという認識になってしまい適用されない。親要素のdivの最初の子要素がh2タグになってしまうためのようです。
p:first-childだけでは最初に出てくるpにスタイルを適用とはいかないので注意。
最初に出てくるpにスタイルを適用するにはp:first-of-typeなどを使用。
ぶぶりんブログ [CSS] 勘違いしている擬似クラスの使い方
:last-child疑似クラスの概要
ある要素内で最初に書かれた子要素を対象にスタイルが適用されます。
:nth-last-child(1) と同じ扱い。
要素名:last-child {
プロパティ: 値;
}
:last-child疑似クラスの使用例
:last-child疑似クラスの使用例をhtmlとcssと共に紹介。
html
<ul>
<li>HOME</li>
<li>About</li>
<li>Blog</li>
</ul>
css
li {
display:inline-block;
border-right:1px solid #000;
padding:5px 15px;
}
li:last-child {
border-right:none;
}
実際の表示
横並びにしたリストの間に線を入れ、最後の線を消した例。
:last-childの間違いやすい記述
:first-childと同様に:last-childも同じように間違いやすい箇所があります。
: last-child使用の失敗例
p:last-childと書くと最後のpタグにスタイルが適用されると思えますが、実際は上記の例ですとdivタグの最後の子要素はh3になるためスタイルは適用されません。
最後に出てくるpにスタイルを適用するにはp:last-of-typeなどを使用。
ぶぶりんブログ [CSS] 勘違いしている擬似クラスの使い方
:nth-child()疑似クラスの概要
:nth-child()疑似クラスは、ある要素の最初から数えて、n番目にあたる子要素にスタイルを適用します。
:nth-child(an+b)という風に()の中で何番目かを指定。
:nth-child(2)と書けば、2番目の子要素に。:nth-child(2n)と書いた場合は、2の倍数の子要素に。:nth-child(2n+1)と書いた場合は、2の倍数に1を足した子要素に。（1,3,5,….番目）他にも:nth-child(odd)は奇数、:nth-child(even)は偶数番目の子要素。という風に数値の指定は色々ありますががここでは詳細は割愛します。
要素名:nth-child(数値) {
プロパティ: 値;
}
:nth-child()疑似クラスの使用例
:nth-child()疑似クラスの使用例をhtmlとcssと共に紹介。
html
<ol>
<li>ここは1番目の項目</li>
<li>ここは2番目の項目</li>
<li>ここは3番目の項目</li>
<li>ここは4番目の項目</li>
<li>ここは5番目の項目</li>
</ol>
css
li:nth-child(odd) {
color:red;
}
li:nth-child(even) {
color:blue;
}
実際の表示
奇数番目の子要素を赤文字、偶数番目の子要素を青文字にした例。
li:nth-child(odd)はli:nth-child(2n+1)と同効果。
li:nth-child(even)はli:nth-child(2n)と同効果。
商品一覧などfloatでたくさん並べたりする時などに使用することが多い気がします。
:nth-last-child()疑似クラスの概要
:nth-last-child()疑似クラスは、ある要素の最後から数えて、n番目にあたる子要素にスタイルを適用します。
:nth-last-child(an+b)という風に()の中で何番目かを指定。
要素名:nth-last-child(数値) {
プロパティ: 値;
}
:nth-last-child()疑似クラスの使用例
:nth-last-child()疑似クラスの使用例をhtmlとcssと共に紹介。
html
<ol>
<li>ここは1番目の項目</li>
<li>ここは2番目の項目</li>
<li>ここは3番目の項目</li>
<li>ここは4番目の項目</li>
<li>ここは5番目の項目</li>
</ol>
css
li:nth-last-child(4) {
color:red;
}
li:nth-last-child(-n+2) {
color:blue;
}
実際の表示
最後から4番目の子要素を赤に、最後から2番目までの子要素を青にした例。
:nth-last-child(-n+2)のように-nにスタイルを適用したいところまでを+数字にすると最後から指定した数字までの子要素にスタイルが適用されます。
使用したことないですが、場面によっては利用できそうですね。
:first-of-type疑似クラスの概要
:first-of-type疑似クラスは、ある要素の指定した最初の要素にスタイルを適用します。
:first-child疑似クラスと違い間に他の要素があっても大丈夫。
:nth-of-type(1)と同じ扱い。
要素名:first-of-type {
プロパティ: 値;
}
:first-of-type疑似クラスの使用例
:first-of-type疑似クラスの使用例をhtmlとcssと共に紹介。
html
<div>
<h2>タイトル</h2>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
</div>
css
p:first-of-type {
color:red;
}
実際の表示
first-childと違い指定した要素の最初の要素にスタイルが適用されるので、感覚的に使用しやすい気がしました。今回の例で言うと間にh2が入っても大丈夫という点。
:last-of-type疑似クラスの概要
:last-of-type疑似クラスは、ある要素の指定した最後の要素にスタイルを適用します。
:last-child疑似クラスと違い間に他の要素があっても大丈夫。
:nth-last-of-type(1)と同じ扱い。
要素名:last-of-type {
プロパティ: 値;
}
:last-of-type疑似クラスの使用例
:last-of-type疑似クラスの使用例をhtmlとcssと共に紹介。
html
<div>
<h2>タイトル</h2>
<p>ダミーテキスト</p>
<p>ダミーテキスト</p>
<h3>タイトル</h3>
</div>
css
p:last-of-type {
color:red;
}
実際の表示
first-of-typeと同様に要素の最初の要素にスタイルが適用されるので、感覚的に使用しやすい気がしました。
:nth-of-type()疑似クラスの概要
:nth-of-type()疑似クラスは、ある要素の指定した要素の最初から数えてn番目の子要素にスタイルを適用します。
要素名:nth-of-type(数値) {
プロパティ: 値;
}
:nth-of-type()疑似クラスの使用例
:nth-of-type()疑似クラスの使用例をhtmlとcssと共に紹介。
html
<h2>タイトル</h2>
<p>1番目のテキスト</p>
<p>2番目のテキスト</p>
<h2>タイトル</h2>
<p>3番目のテキスト</p>
<p>4番目のテキスト</p>
css
p:nth-of-type(3) {
color:red;
}
p:nth-child(3) {
color:blue;
}
実際の表示
:nth-childとの比較ため一緒に掲載した例。
p:nth-of-typeは、三番目のpにスタイルが適用されているが、:nth-childはhタグも含めて三番目の要素にスタイルが適用されています。
個人的には、:nth-childは使用していましたが:nth-of-typはなぜか使用していませんでしたが意外と:nth-of-typeの方が使いやすいかもと感じました。
:nth-last-of-type()疑似クラスの概要
:nth-last-of-type()疑似クラスは、ある要素の指定した要素の最後から数えてn番目の子要素にスタイルを適用します。
要素名:nth-last-of-type(数値) {
プロパティ: 値;
}
:nth-last-of-type()疑似クラスの使用例
:nth-last-of-type()疑似クラスをhtmlとcssと共に紹介。
html
<h2>タイトル</h2>
<p>1番目のテキスト</p>
<p>2番目のテキスト</p>
<h2>タイトル</h2>
<p>3番目のテキスト</p>
<p>4番目のテキスト</p>
css
p:nth-last-of-type(3) {
color:red;
}
p:nth-last-child(5) {
color:blue;
}
実際の表示
:nth-last-childとの比較を一緒に掲載した例。
p:nth-of-typeは最後から三番目のpにスタイルが適用されて、:nth-last-childはhタグもカウントされるので最後から5番目の要素にスタイルが適用されています。
:only-child疑似クラスの概要
:only-child疑似クラスは、ある要素内で子要素が唯一の場合に指定した要素にスタイルが適用されます。
要素名:only-child {
プロパティ: 値;
}
:only-child疑似クラスの使用例
:only-child疑似クラスをhtmlとcssと共に紹介。
html
<div>
<p>唯一の子要素</p>
</div>
<div>
<h2>タイトル</h2>
<p>ダミーテキスト</p>
</div>
css
p:only-child {
color:red;
}
実際の表示
指定した唯一の子要素にスタイルが適用され、他の要素が一緒にある場合は適用されません。
かなり限定的なので、ニワカにはどこで利用できるか想像がつかないです。。
:only-of-type疑似クラスの概要
:only-of-type疑似クラスは、ある要素内の指定した要素が唯一の場合にスタイルが適用されます。
要素名:only-of-type {
プロパティ: 値;
}
:only-of-type疑似クラスの使用例
:only-of-type疑似クラスをhtmlとcssと共に紹介。
html
<div>
<p>唯一の子要素</p>
</div>
<div>
<h2>タイトル</h2>
<p>ダミーテキスト</p>
</div>
css
p:only-child {
color:red;
}
実際の表示
:only-childとは違い、他の要素が途中で入っても指定した子要素が唯一の場合に適用されます。
:only-childよりは、効率的にcssを書くために使用できそうな気がしました。
:empty疑似クラスの概要
:empty疑似クラスは、要素内がテキストや空白などを含め空の場合に適用されるセレクタ。
コメントは入れても空要素としてスタイルが適用される。
要素名:empty {
プロパティ: 値;
}
:empty疑似クラスの使用例
:empty疑似クラスをhtmlとcssと共に紹介。
html
<div></div>
<div>ダミーテキスト</div>
<div> </div>
<div> </div>
<div><!--コメント--></div>
css
:empty {
display:block;
padding: 10px;
background-color: #000;
}
実際の表示
コメントは別として、空要素のみに適用される。
実際には、どんな場面で使用するのでしょうね。。
table作成時の空要素などなのでしょうか。。。
個人的メモ
:nth-child系と:nth-of-type系の違いが初めて分かった気がします。
:nth-of-type系は使用する機会が個人的には増えるかもと思いました。（小並感）
あと、内容薄い気もしますが長い記事は作るは時間が掛かり見直しも大変で個人的に向いていないと思いました。
参照ページ
記事にする際に参考にさせていただいたページ。
