CSS-擬似クラスと擬似要素の概要とセレクタ指定について


CSS-擬似クラスと擬似要素の概要とセレクタ指定について

 

擬似クラスと擬似要素おさらい。

擬似クラス

特定の状態にある要素にスタイルを適用するもの。
:link や :hoverなど。

擬似要素

要素の一部にスタイルを適用するもの。
要素の一行目や一文字目にスタイルを指定したり、 要素の前後にテキストや画像などを挿入することが出来る。
::before や ::after など。
css3以前はコロン(:)1つだったが、css3から擬似クラスと擬似要素を明確にするためコロン(::)2つに変更された。
多くのブラウザでは前記法のコロン1つ(:)でも使える。

CSS対応ブラウザ確認はcaniuse.com/

 

擬似クラス

擬似クラス css1-css2 対象となる要素と記述例
:link

CSS1

リンク疑似クラス

未訪問のリンクにスタイル適用
a要素のみ適用可
a:link {color: red;}
:visited

CSS1

リンク疑似クラス

訪問済みのリンクにスタイル適用
a要素のみ適用可
a:visited {color: red;}
:hover

CSS2

ダイナミック疑似クラス

カーソルが乗っている時にスタイル適用

a:hover {color: red;}

:active

CSS1-CSS2

ダイナミック疑似クラス

クリック中の要素にスタイル適用
a要素のみ適用可
a:activ {color: red;}
:focus

CSS2

ダイナミック疑似クラス

フォーカスされた要素にスタイル適用

a:focus {color: rede;}

:lang()

CSS2

言語疑似クラス

特定の言語を指定した要素にスタイル適用

p:lang(en) {color: red;}

:first-child

CSS2

first-child擬似クラス

要素内の最初の子要素にスタイル適用
(右の使用例だとすると、div の中の最初に p 要素がある場合に限り
最初の p 要素にスタイルを適用。div内最初の子要素が他であり、のちにp要素あっても適用されない。)
div p:first-child {color: red;}
擬似クラス css3 対象となる要素と記述例
:root ドキュメント内のルート要素を指定してスタイルを適用。HTMLの場合htmlを指定。
要素セレクタhtmlより優先度は高い。
:nth-child(n)

 

親要素内の 最初から数えて n 番目にあたる子要素へスタイルを適用。
:nth-last-child(n)

 

親要素内の最後から数えて n 番目にあたる子要素へスタイルと適用。
:nth-of-type(n)

 

別の要素を数えず 最初から n 番目のその要素へスタイルを適用。
:nth-last-of-type(n)

 

別の要素を数えず最後から n 番目のその要素へスタイルを適用。
:last-child(n)

 

親要素内の最後から数えて n 番目にあたる子要素へスタイルを適用。
:first-of-type

 

ある要素内の最初のその要素へスタイルを適用。

:first-childの場合は要素内最初にその要素があった場合にスタイルを適用するが、

:first-of-typeの場合は最初に他の要素があった場合でも、指定した要素の最初にスタイルを適用。

:last-of-type

 

ある要素内の最後のその要素へスタイルを適用。

:first-of-typeと同条件。

:only-child

 

指定した要素の他に要素がない場合(唯一だった場合)にスタイルを適用。

つまり子要素が1つだった場合。

:only-of-type

 

指定した要素の数が1つだけだった場合にスタイルを適用。

 

:empty

 

指定した要素の中身が空の場所へスタイルを適用。
:target リンク先の要素へスタイルを適用。

タブメニューや画像ギャラリーなど便利なセレクタ。

:enabled フォーム(入力エリアなど)のユーザーインターフェースへスタイルを適用。

有効状態となっている時にスタイルを適用。

:disabled フォーム(入力エリアなど)のユーザーインターフェースへスタイルを適用。

無効状態となっている時にスタイルを適用。

:checked フォームのラジオボタンなどにチェックが入っている時にスタイルを適用。

 

:not(s) s で指定するセレクタではない要素へスタイルを適用。

例:class属性のないp要素の色を赤色に
p:not ([class]) {color: red;}

疑似要素

 擬似要素
::first-line 

 

 指定した要素の一行目のブロックレベル要素へスタイルを適用。
::first-letter
 指定したブロックレベル要素の一文字目にスタイルを適用。

細かい仕様がある。https://www.w3.org/TR/css3-selectors/#first-letter

blockinline-blocktable-celllist-itemtable-caption のいずれかである場合に適用。

一文字目より前に他のコンテンツ(画像やインラインテーブルなど)がない場合に適用。

言語によっても2文字が適用されたりなどがある。

::before

 

content プロパティを使い、指定した要素の直前に指定した内容を生成する。

.maru::before{content:" ◎ ";color: red;}

::after  content プロパティを使い、指定した要素の直後に指定した内容を生成する。

.maru::after{content:" ◎ ";color: red;}

セレクタの指定方法

*(ユニバーサルセレクタ) 全ての要素を対象に指定できるセレクタ。
ブラウザの持つデフォルトスタイルを無効にするリセットcssによく使われる。
以下のように記述すると、ID:main の中の全ての要素にスタイルを指定することができる。
#main * {margin: 0;padding: 0;}
E(タイプセレクタ) 要素名でスタイルを適用する方法。

html {font-size:62.5%;}
h1 {font-size:2.4rem}
など、リセットCSSやデフォルトCSSにもよく使われる。

E F(子孫セレクタ)

 

要素名を半角スペースで区切り、ある要素の下の階層の子要素を指定していく方法
E , F 要素名と要素名を , (カンマ)で区切り、複数の要素に同じスタイルを適用する指定方法。

 

E > F(子セレクタ) E要素の直接の子要素Fを対象にした指定方法。孫要素以下へはスタイルを適用できない。

 

E + F(隣接セレクタ) E要素の直後に隣接しているF要素にスタイルを適用する

 

E ~ F

(css3)

E要素と同じ階層のF要素にスタイルを適用する。

 

#ID名 IDを指定してスタイルを適用する。IDはドキュメント内に1つだけ使用可能。

 

.クラス名 クラスを指定してスタイルを適用する。IDと違い重複可。

 

属性セレクタ

属性とは属性値を持つもので、以下のような属性。

「id」「title」「style」「lang」「href」「type」など

要素名[属性名]

 

span[lang] {color: red;}

上記例:lang属性を持つspan要素のテキストカラーを赤に。

要素名[属性名=”値”] a[href="http://mizukazu.minibird.jp"] {background-color: red;}

href属性の上記のアドレス値と完全一致した場合に背景色を赤に。

要素名[属性名~=”値”] a[rel~="alternate"] {font-style: italic;}

rel属性のaltnernate値を持つ要素にスタイルと適用。
複数の属性値がスペースで区切られていて、そのうちひとつと完全一致した場合に適用。

要素名[属性名|=”“]

 

p[lang|="en"] {color: red;}

ハイフンで区切られた属性値に対応。ハイフンより前が一致すればスタイルが適用される。
上記例の場合、「en-us」「en-gb」「en-au」などが一致となる。

要素名[属性名^=値]

(css3)

a[href^="https:"] {color: red;}

属性名の値が前方一致のときスタイルを適用。
上記の場合aリンクが[ https: ]で始まっているときスタイルを適用する。

要素名[属性名$=値]

(css3)

a[href$=".pdf"] {color: red;}

属性名の値が後方一致のときスタイルを適用。
上記の場合aリンクが[ .pdf ]で始まっているときスタイルを適用する。

要素名[属性名*=値]

(css3)

a[href*="mizukazu.minibird.jp"] {color: red;}

指定の属名に指定の値を含むものにスタイルを適用する。
上記の場合aリンクに[ mizukazu.minibird.jp ]を含むものにスタイルを適用する。

ずらずらと書いてみましたが、::before 、::after 、 :target などの便利そうなところは次回に以降にやってみよう。


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL