CSS基礎④

疑似クラス

文章構造の範囲外にある情報によってスタイルを変化させることができる

セレクタの後ろに「:擬似クラス名」を追記することである要素の特定の状態や特定の子要素だけにスタイルを指定することができる。HTMLには一切変更を加える必要がなく、変更する時もCSSの修正だけで済む。

主要疑似クラス

リンク関連でよく使うもの

『○番目かの子要素』に対する指定をするもの

:first-child or :last-child …兄弟のうち1番初め or 最後の子要素

例）「こぶた」と「うま」の色を変える

See the Pen Untitled by 慧南（えな） (@oukitsu) on CodePen.

:nth-child(n) …兄弟のうちn番目の子要素

<div class="sample">
  <h1>しりとり</h1>
<p>こぶた（1番目のpタグ）</p>
<p>たぬき（2番目のpタグ）</p>
<p>きつね（3番目のpタグ）</p>
<p>ねこ（4番目のpタグ）</p>
</div>

div p:nth-child(3) {
    color: #ff1493;
}

:first-of-type or :last-of-type…兄弟要素のうち、型が一致する一番初め or 最後の子要素

例）「こぶた」と「ねこ」の色を変える

See the Pen Untitled by 慧南（えな） (@oukitsu) on CodePen.

その他のタグ（↓）

“child”と”of-type”の違い

例）first-childとfirst-of-typeの違い

<div class="example">
    <h1>しりとり</h1>
  <p>もぐら（１番目のpタグ）</p>
  <p>らくだ（2番目のpタグ）</p>
  <p>だちょう（3番目のpタグ）</p>
  <p>うま（4番目のpタグ）</p>
</div>

.example :first-child{
  color: #7fffd4;
}

<div class="sample">
  <h1>しりとり</h1>
　　<p>こぶた（1番目のpタグ）</p>
　　<p>たぬき（2番目のpタグ）</p>
　　<p>きつね（3番目のpタグ）</p>
　　<p>ねこ（4番目のpタグ）</p>
</div>

.sample p:first-of-type{
    color: #ff1493;
}

そのほか

参考リンク

• CSSの:first-childや:last-childが効かない場合の対処法！

疑似要素

要素の一部に対してスタイルを適用できる指定方法

セレクタの後ろに「:擬似要素名」を追記することで、HTMLの記述に影響を与えずコンテンツの内容やスタイルを変更する。

例）下のように見出しの一文字目の色だけを変えたい場合

<h2><span>見</span>出しサンプル</h2>

h2 span{
	color: aquamarine;
}

<h2>見出しサンプル</h2>

h2::first-letter{
	color: aquamarine;
}

擬似要素を使わなくても同じ効果は得られるが、コーディング規則から判断すると不適切となる上に、複数に適用させようとした場合、設定漏れを起こす可能性もあるため非推奨。

主要擬似要素

See the Pen Untitled by 慧南（えな） (@oukitsu) on CodePen.

• A:: first-letter（要素の一文字目を指定）
• A:: first-line（要素の一行目を指定）
• A::before or A::after（要素の直前または直後にコンテンツを追加）

疑似要素と疑似クラスの違い

リストや表について

リスト項目やテーブル（表）のHTMLのタグに対して、それぞれのCSSがある。文法と見た目の特徴に合わせて上手に使っていくこと。

リストのマークについて

リスト項目の先頭に表示されるマーカーの種類や位置を調整したり、装飾したりすることができる。

参考サイト

• CSSで作るリストデザイン38選！オシャレな箇条書きを実現
• 【CSS】list-style-typeの使い方：箇条書きのマーカー種類を変える
• 【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ
• CSSの擬似クラス・擬似要素を複数使いたいときの書き方
• CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介