CSS の擬似クラスと擬似要素
色々増えてるなぁ と思って調べて ついでのまとめ
もともと擬似クラスも擬似要素も : から始まっていましたが CSS3 ではわかりやすくするため :: が擬似要素で : が擬似クラスとわかれたようです
ですが 互換性のために : でも擬似要素が使えます(一部除く)
全部 : でいいのに
before, after だけかと思ったら first-letter なども擬似要素みたいです
本来存在しない要素を作るものかと思ってましたが そういうことではないみたいです
クラス xx に ::after を指定した場合はこの位置にあります
要素の内側というところと content プロパティ必須なのに注意です
文字がいらないなら content プロパティに空文字設定です
content 必須なのと内側になるのは一緒です
あまり先とか後を気にせず position:absolute; をつけてデザイン用に使うことが多いです
最初の一文字を大きくしたり 左にマージンつけて 段落開始の一文字あけるとかできます
"「あ" とか "あ、" みたいな場合は 一文字じゃなく 2 文字になります
inline 要素には使えないので注意
ドラッグで選択したら反転する色が綺麗なページが作れます
特殊な要素を指定するためのセレクタ
:visited や :hover, :active より先に書かないと使えない面倒仕様
:link のあと :active, :hover の前じゃないと(ry
タッチじゃ意味ない
:link, :visited のあと :active の前じゃな(ry
マウスを押している間
:link, :visited, :hover のあと つまり最後じゃ(
デフォルトだとアウトラインが付いてる状態
他の条件を満たした中での最初の子というわけではないので注意
N は 1 から始まる
n は 0 以上のすべての整数
親から見て最後から N 番目の子要素
N は 1 から始まる
:nth-child と同じで n を使った式が書ける
兄弟要素の中で条件にあう最後から N 番目の子要素
first-child と last-child を一緒につけるのと一緒
first-of-type と last-of-type を一緒につけるのと一緒
パターンに一致しているなど条件を満たせてる
パターンに合わなかったり 必須なのに選択されていないなど
required がついていない普通の要素
disabled になってないやつ
checkbox や progress で使える
普通の入力可能なもの全部
"#main" がハッシュの値になっていたら id が "main" の要素が :target にマッチする
@page と使う
@page と使う
@page と使う
submit ボタンはそうらしい
:scope はその基準になる scoped 付き style タグの親要素にマッチ
directory ではなく direction の略
HTML のグローバル属性 dir で文字の方向を指定できる
属性セレクタの "[]" と違って 継承や auto も判断してくれる
ltr か rtl の 2 つが選択できる
lang 属性で指定する en (English), ja (Japanese), it (Italian), zh (Chinese) などを指定できる
webkit や moz などが付くものは省略してます
使えるものがバラバラで統一されてなかったです
ですが 互換性のために : でも擬似要素が使えます(一部除く)
全部 : でいいのに
pseudo-elements
擬似要素before, after だけかと思ったら first-letter なども擬似要素みたいです
本来存在しない要素を作るものかと思ってましたが そういうことではないみたいです
::after
指定した要素の内側の最後に要素を追加します<div class="xx">
<p></p>
<p></p>
<p></p>
::after
</div>
<p></p>
<p></p>
<p></p>
::after
</div>
クラス xx に ::after を指定した場合はこの位置にあります
要素の内側というところと content プロパティ必須なのに注意です
文字がいらないなら content プロパティに空文字設定です
::before
基本は ::after と一緒ですが 要素の場所は内側の最初になりますcontent 必須なのと内側になるのは一緒です
<div class="xx">
::before
<p></p>
<p></p>
<p></p>
</div>
::before
<p></p>
<p></p>
<p></p>
</div>
あまり先とか後を気にせず position:absolute; をつけてデザイン用に使うことが多いです
::first-letter
最初の一文字にマッチします最初の一文字を大きくしたり 左にマージンつけて 段落開始の一文字あけるとかできます
"「あ" とか "あ、" みたいな場合は 一文字じゃなく 2 文字になります
::first-line
最初の行にマッチしますinline 要素には使えないので注意
::selection
選択した範囲にマッチしますドラッグで選択したら反転する色が綺麗なページが作れます
pseudo-classes
擬似クラス特殊な要素を指定するためのセレクタ
:link
リンクに対してCSSを適用できる:visited や :hover, :active より先に書かないと使えない面倒仕様
:visited
開いたことのあるリンク:link のあと :active, :hover の前じゃないと(ry
:hover
要素の上にマウスカーソルがあるときタッチじゃ意味ない
:link, :visited のあと :active の前じゃな(ry
:active
アクティブになっている間マウスを押している間
:link, :visited, :hover のあと つまり最後じゃ(
:focus
フォーカス当たってる時デフォルトだとアウトラインが付いてる状態
:first-child
親から見て最初の子要素他の条件を満たした中での最初の子というわけではないので注意
<ul>
<li class="a">
<li class="b">
</ul>
<li class="a">
<li class="b">
</ul>
.a:first-child{} /* マッチ */
.b:first-child{} /* マッチなし */
.b:first-child{} /* マッチなし */
:last-child
親から見て最後の子要素:nth-child()
親から見て N 番目の子要素N は 1 から始まる
tr:nth-child(2n + 2)
みたいに n を使った数式を書けるn は 0 以上のすべての整数
:nth-last-child()
:nth-child の後ろから版親から見て最後から N 番目の子要素
:first-of-type
兄弟要素の中で最初にその条件にあった要素<div>
<p></p>
<span class="span"></span>
<textarea id="text"></textarea>
<button class="btn"></button>
</div>
<p></p>
<span class="span"></span>
<textarea id="text"></textarea>
<button class="btn"></button>
</div>
p:first-of-type{}
.span:first-of-type{}
#text:first-of-type{}
button.btn:first-of-type{}
.span:first-of-type{}
#text:first-of-type{}
button.btn:first-of-type{}
:last-of-type
兄弟要素の中で最後にその条件に合った要素:nth-of-type()
兄弟要素の中で条件にあう N 番目の子要素N は 1 から始まる
:nth-child と同じで n を使った式が書ける
:nth-last-of-type()
:nth-of-type の後ろから版兄弟要素の中で条件にあう最後から N 番目の子要素
:only-child
兄弟要素が自分 1 つだけの要素first-child と last-child を一緒につけるのと一緒
.sample:first-child:last-child{}
:only-of-type
兄弟要素の中で条件にあう要素が自分 1 つだけの要素first-of-type と last-of-type を一緒につけるのと一緒
.sample:first-of-type:last-of-type{}
:valid
validity が true な要素パターンに一致しているなど条件を満たせてる
:invalid
validity が false な要素パターンに合わなかったり 必須なのに選択されていないなど
:required
required 属性が設定された必須要素:optional
必須じゃないものrequired がついていない普通の要素
:in-range
input の number のように範囲をもつもので値が範囲内のとき:out-of-range
:in-range の逆で範囲をもつもので値が範囲外のとき:checked
checkbox か radio の input でチェックが付いてるもの:disabled
disabled に設定されてる要素:enabled
使用可能な input 系要素disabled になってないやつ
:indeterminate
indeterminate 状態の要素checkbox や progress で使える
:read-only
readonly の要素:read-write
readonly じゃない要素普通の入力可能なもの全部
:root
DOM ツリーのルートを指す:root:root:root .tes{}
と書いて 優先度上げるテクニックもあったり:empty
子要素がなく空の要素にマッチ:target
ハッシュで指定した id を持つ要素"#main" がハッシュの値になっていたら id が "main" の要素が :target にマッチする
:not()
() の中に入れたセレクタにマッチしないものli:not(.active){}
div:not(:first-child){}
div:not(:first-child){}
:first
印刷するときの最初のページ@page と使う
:left
印刷するときの左側のページ@page と使う
:right
印刷するときの右側のページ@page と使う
:any()
カンマ区切りの引数のどれかに一致すればマッチ:default
デフォルトとして設定されている要素submit ボタンはそうらしい
:fullscreen
フルスクリーンモードのとき:scope
style タグに scoped 属性をつけるとそのタグの親要素以下が style の適用範囲になる:scope はその基準になる scoped 付き style タグの親要素にマッチ
:dir()
文字の方向が一致すればマッチdirectory ではなく direction の略
HTML のグローバル属性 dir で文字の方向を指定できる
属性セレクタの "[]" と違って 継承や auto も判断してくれる
ltr か rtl の 2 つが選択できる
:lang()
言語がマッチすればlang 属性で指定する en (English), ja (Japanese), it (Italian), zh (Chinese) などを指定できる
webkit や moz などが付くものは省略してます
使えるものがバラバラで統一されてなかったです