属性セレクタ

E[foo]
属性fooを持つE／p[class]

適用された部分は背景が黄色くなります。

クラスなし

class="test"

class="target"

class="target test"

class="target1"

E[foo="bar"]
属性fooがbarであるE／p[class="target"]

適用された部分は背景が黄色くなります。

クラスなし

class="test"

class="target"

class="target test"

class="target1"

E[foo~="bar"]
属性fooが単語barを含むE／p[class~="target"]

適用された部分は背景が黄色くなります。

クラスなし

class="test"

class="target"

class="target test"

class="target1"

E[foo^="bar"]
属性fooがbarで始まるE／p[class^="target"]

適用された部分は背景が黄色くなります。

クラスなし

class="test"

class="target"

class="target test"

class="target1"

E[foo$="bar"]
属性fooがbarで終わるE／p[class$="t"]

適用された部分は背景が黄色くなります。

クラスなし

class="test"

class="target"

class="target test"

class="target1"

E[foo*="bar"]
属性fooが文字列barを含むE／p[class*="te"]

適用された部分は背景が黄色くなります。

クラスなし

class="test"

class="target"

class="target test"

class="target1"

E[hreflang|="bar"]
hreflang属性がbarを含む

en-US/enが青、jaは白、zhは赤になります。

Yahoo!

Yahoo! UK and Ireland

Yahoo! Japan

中国雅虎

擬似クラス

E:root
ルート要素／:root

コンテンツの外側にマージンがあれば対応。なければ非対応。

以下の文章は、青空文庫より引用しております。

以下、適用された行の背景がピンクになります。一つもならないセクションは非対応。

E:nth-child(n)
兄弟要素のn番目の要素がE／p:nth-child(even)

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E:nth-last-child(n)
兄弟要素の後ろからn番目の要素がE／p:nth-last-child(1)

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E:nth-of-type(n)
兄弟要素内にあるEのn番目／p:nth-of-type(even)

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E:nth-last-of-type(n)
兄弟要素内にあるEの後ろからn番目／p:nth-last-of-type(1)

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E:first-child
Eの最初の子要素／*:first-child

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E:last-child
Eの最後の子要素／*:last-child

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E:first-of-type
兄弟要素内の最初のE／p:first-of-type

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E:last-of-type
兄弟要素内の最後のE／p:first-of-type

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E:only-child
兄弟のない要素／*:only-child

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E:only-of-type
兄弟要素に1つしかないE ／*:only-of-type

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E:empty
空の要素／*:empty::after

空タグの場所を赤文字で示します。何もでない場合は非対応。

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

リンク擬似クラス

E:link, E:visited
／a:link, a:visited

リンクテキスト(CLICK!)

リンクテキスト(CLICK!)

ダイナミック擬似クラス

E:active, E:hover, E:focus
／*:active, *:hover, *:focus

乗せると背景黄色、押すと赤ボーダー、フォーカスされるとオレンジ

リンクテキスト

普通のテキスト

｜

ターゲット擬似クラス

E:target
ページ内リンク（フラグメント識別子）でターゲットにされた要素／*:target

クリックすると、上の「ダイナミック擬似クラス」のセクションに赤い枠

id「linkpclass2」をターゲットに。

言語擬似クラス

E:lang(foo)
lang属性がfooを含むE

enで文字青、jaで緑、zhで赤

English

にほんご

中文

UI要素状態擬似クラス

E:enabled, E:disabled, E:checked
／*enabled, *disabled, checked*

enabledで緑ボーダー、disabledで背景が黒、checkedで続くラベルが赤



擬似要素

E::first-line
Eの最初の行／*::first-line

適用されると字消し。

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って
「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう
「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E::first-letter
Eの最初の文字／*::first-letter

適用されると文字が大きく。

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って
「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E::selection
ユーザーにハイライトされた部分／*::selection

文字を選択すると赤文字に。

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。
この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E::before, E::after
／*::before, *::after

適用されると、要素の前後に「ここから＜」「＞ここまで」と赤文字で追加されます。
（Operaでは、::first-lineと::beforeを同一ページで設定すると表示にバグが発生するようです。before/afterのみのサンプルで確認）

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

否定擬似クラス

E:not(s)
条件sを満たさないE／p:not([class^="target"])

適用されると字消し。

クラスなし

class="test"

class="target"

class="target test"

class="target1"

セレクタ

適用されると字消し。

E F
親要素にEを持つF／#pselector p

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E>F
直接の親要素にEをもつF／#pselector1>p

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E+F
直前の兄弟要素にEがあるF／div+p

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう

「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。

E~F
兄弟要素Eの後に来るF／div~p

私は嬉しい。「あやかしの鼓」の由来を書いていい時機が来たから……

「あやかし」という名前はこの鼓の胴が世の常の桜や躑躅と異って「綾になった木目を持つ赤樫」で出来ているところからもじったものらしい。

同時にこの名称は能楽でいう

「妖怪」という意味にも通っている。

この鼓はまったく鼓の中の妖怪である。

皮も胴もかなり新らしいもののように見えて実は百年ばかり前に出来たものらしいが、これをしかけて打ってみると、ほかの鼓の、あのポンポンという明るい音とはまるで違った、陰気な、余韻の無い……ポ……ポ……ポ……という音を立てる。