hxxk.jp

要素セレクタ

E.warning (HTML にて class が 1 つ指定されたクラスセレクタ )

この段落の文字色は black になっているはずです

この段落の文字色は blue になっているはずです

E.warning1.warning2 (HTML にて class が 2 つ指定されたクラスセレクタ )

この段落の文字色は black になっているはずです

この段落の文字色は green になっているはずです

E.warning4.warning3 (HTML にて class が 2 つ指定され、 HTML と CSS での指定の順番が異なるクラスセレクタ )

この段落の文字色は black になっているはずです

この段落の文字色は orange になっているはずです

E.warning5.warning6.warning7 (HTML にて class が 3 つ指定されたクラスセレクタ )

この段落の文字色は black になっているはずです

この段落の文字色は purple になっているはずです

E.warning5.warning7 (HTML にて class が 3 つ指定され、そのうち 2 つを含むクラスセレクタ )

この段落の文字色は black になっているはずです

この段落の文字色は red になっているはずです

E#myID (id 属性がmyID で、かつ # 形式であるID セレクタ )

この段落の文字色は black になっているはずです

この段落の文字色は blue になっているはずです

E ( タイプセレクタ )

この段落の文字色は black になっているはずです

この段落の文字色は blue になっているはずです

* ( ユニバーサルセレクタ )

この段落の文字色は black になっているはずですが、 h1 要素の文字色は gray になっているはずです

属性セレクタ

E[att=val] ( 属性が val に一致する属性セレクタ )

この段落の文字色は black になっているはずです

この段落の文字色は blue になっているはずです

E[att] ( 値を問わず、その属性が指定されている属性セレクタ )

この段落の文字色は black になっているはずです

この段落の文字色は green になっているはずです

E[att|=val] ( 属性値が val で始まる、ハイフンで区切られた属性セレクタ )

この段落の文字色は black になっているはずです

この段落の文字色は orange になっているはずです

E[att~=val] ( 属性値がスペースで区切られたリストで、そのリストの内 val に一致する属性セレクタ )

この段落の文字色は black になっているはずです

この段落の文字色は purple になっているはずです

連結子

E+F ( 隣接兄弟セレクタ )

この段落の文字色は black になっているはずです

この段落の文字色は blue になっているはずです

E>F ( 子セレクタ )

この段落の文字色は black になっているはずです

• この段落の文字色は green になっているはずです

E F ( 子孫セレクタ )

この段落の文字色は black になっているはずです

• この段落の文字色は orange になっているはずです

擬似クラス

a:active (a 要素に指定した :active ダイナミック擬似クラス )

このリンクをクリックして離すまでの間は、リンクの背景色が #faa; ( 薄い赤色 ) になるはずです

:active ダイナミック擬似クラス

thead1	thead2	thead3
tbody の中のセルをクリックして離すまでの間は、セルの背景色が #faa; ( 薄い赤色 ) になるはずです
tbody1	tbody2	tbody3
tbody4	tbody5	tbody6
tbody7	tbody8	tbody9
tbody10	tbody11	tbody12

:after 擬似要素

CSS の互換性と Internet Explorer の表が間違っているため、擬似要素の項を参照

:before 擬似要素

CSS の互換性と Internet Explorer の表が間違っているため、擬似要素の項を参照

:first-child 擬似クラス

この段落の文字色は blue になっているはずです

この段落の文字色は black になっているはずです

a:focus (a 要素に指定した :focus ダイナミック擬似クラス )

次のリンクリストを Tab キーで順に移動すると、フォーカスしているリンクの背景色が #aaf; ( 薄い青色 ) になるはずです

• リンク 1
• リンク 2
• リンク 3

:focus (:focus ダイナミック擬似クラス )

この入力フォームに文字を入力している状態のとき、背景色が #aaf; ( 薄い青色 ) になるはずです

a:hover (a 要素に指定した :hover ダイナミック擬似クラス )

このリンクにマウスカーソルを乗せている間は、リンクの背景色が yellow になるはずです

:hover ダイナミック擬似クラス

thead1	thead2	thead3
tbody の中のセルにマウスカーソルを乗せている間は、セルの背景色が yellow になるはずです
tbody1	tbody2	tbody3
tbody4	tbody5	tbody6
tbody7	tbody8	tbody9
tbody10	tbody11	tbody12

:lang 擬似クラス

この段落の文字色は black になっているはずです

The color of this paragraph...blue?

:link 擬似クラス、 :visited 擬似クラス

このページ内のリンクで、未訪問のリンクは 文字色が blue かつ下線付き、訪問済みのリンクは文字色が purple かつ点線の下線付きになっているはずです

擬似要素

:first-letter 擬似要素

この段落の一文字目は他の文字の倍のサイズになっているはずです

:first-line 擬似要素

ブラウザのサイズに依存しますが、この段落の一行目の文字色は blue になっているはずですテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

:after 擬似要素、 :before 擬似要素

次の引用文の前には引用元の記事のタイトル、引用文の後には引用元のアドレスが表示されるはずです

Copy URL+ 1.3.2 のまとめ。導入からバグへの対処、カスタマイズの例まで。に、 一度user.jsに記入した後、再度記入したｺｰﾄﾞを少なくして他のを付け足したら・・右クリックで付け足したものと以前のもの全部表示されてしまいます。最初に記入したものを記憶させないようにするにはどうすればいいのでしょうか？ というリプライが寄せられました。 user.js の作成と注意点で user.js への設定の追加については書いていましたが、設定の削除については書いていなかったですね。 ( というか、設定を削除するという状況を考えたことがなかったので、想定外の質問でした。 )

::selection 擬似要素

リスト項目のテキストをマウスやキーボードで選択している時に、背景色が #ffc になり、文字の色が red になっているはずです。 （この段落のテキストを選択したときとくらべてみてください。）

• このリストのテキストをマウスやキーボードで選択してみてください
• このリストのテキストをマウスやキーボードで選択してみてください
• このリストのテキストをマウスやキーボードで選択してみてください
• このリストのテキストをマウスやキーボードで選択してみてください
• このリストのテキストをマウスやキーボードで選択してみてください
• このリストのテキストをマウスやキーボードで選択してみてください
• このリストのテキストをマウスやキーボードで選択してみてください

nth-child

この段落は div#nth-child の 1 番目の子の p 要素です。

この段落は div#nth-child の 2 番目の子の p 要素です。

この段落は div#nth-child の 3 番目の子の p 要素です。

この段落は div#nth-child の 4 番目の子の p 要素です。

この段落は div#nth-child の 5 番目の子の p 要素です。

この段落は div#nth-child の 11 番目の子の p 要素です。

この段落は div#nth-child の 12 番目の子の p 要素です。

この段落は div#nth-child の 13 番目の子の p 要素です。

この段落は div#nth-child の 14 番目の子の p 要素です。

この段落は div#nth-child の 15 番目の子の p 要素です。

nth-of-type

この段落は div#nth-of-type の 1 番目の子の p 要素です。

この段落は div#nth-of-type の 2 番目の子の p 要素です。

この段落は div#nth-of-type の 3 番目の子の p 要素です。

この段落は div#nth-of-type の 4 番目の子の p 要素です。

この段落は div#nth-of-type の 5 番目の子の p 要素です。

この段落は div#nth-of-type の 11 番目の子の p 要素です。

この段落は div#nth-of-type の 12 番目の子の p 要素です。

この段落は div#nth-of-type の 13 番目の子の p 要素です。

この段落は div#nth-of-type の 14 番目の子の p 要素です。

この段落は div#nth-of-type の 15 番目の子の p 要素です。