E[foo^="bar"] 属性セレクタ
属性の値がbarで始まる要素を対象にスタイルを適用します。
サンプルではhref属性の値が"http://"で始まる要素を赤字にしてます。
#forward a[href^="http://"]{ color:#F00; }html
ブラウザでの表示
E[foo$="bar"] 属性セレクタ
属性の値がbarで終わる要素を対象にスタイルを適用します。
サンプルではhref属性の値が"pdf"で終わる要素にはPDFアイコンを、
"doc"で終わる要素にはwordアイコンを表示してます。
#backward a[href$="pdf"]{ padding:3px 0 3px 20px; background:url(pdf.gif) no-repeat; } #backward a[href$="doc"]{ padding:3px 0 3px 20px; background:url(word.gif) no-repeat; }html
ブラウザでの表示
E[foo*="bar"] 属性セレクタ
属性の値がbarを含む要素を対象にスタイルを適用します。
サンプルではsrc属性の値が"chrome"を含む要素にボーダーを付けてます。
#part img[src*="chrome"]{ border:1px #333 solid; }html
ブラウザでの表示
E:root 疑似クラス
文書内のルートにあたる要素にスタイルを適用します。
サンプルでは(X)HTMLのルートであるhtml要素にグレーの背景色を指定してます。
htmlはbody要素の親にあたるのでbodyにmarginを指定する事でhtmlの背景を表示させてます。
:root{ background-color:#E6E6E6; } body{ margin:5px; }
E:nth-child(n) 疑似クラス
隣接している子要素のn番目にあたる要素にスタイルを適用します。
n番目というのは隣接している要素を全て数えるので、間に別の要素が有るとその要素もカウントします。
サンプルでは頭から数えて偶数番目のdd要素に赤を6番目のdd要素に紫を指定してます。
#nthChild dd{ margin-left:10px; } #nthChild dd:nth-child(2n){color:#F00; } #nthChild dd:nth-child(6){ color:#90C; }html
ブラウザでの表示
- Spring
- March
- April
- May
- Summer
- June
- July
- August
- Autumun
- September
- October
- November
- Winter
- December
- January
- February
- Spring
- March
- April
- May
- Summer
- June
- July
- August
- Autumun
- September
- October
- November
- Winter
- December
- January
- February
E:nth-last-child(n) 疑似クラス
隣接している子要素の最後から数えてn番目にあたる要素にスタイルを適用します。
n番目というのは隣接している要素を全て数えるので、間に別の要素が有るとその要素もカウントします。
サンプルでは最後から数えて奇数番目のdd要素に青を3番目のdd要素に紫を指定してます。
#nthLastChild dd{ margin-left:10px; } #nthLastChild dd:nth-last-child(odd){ color:#06C; } #nthLastChild dd:nth-last-child(3){ color:#90C; }html
ブラウザでの表示
- Spring
- March
- April
- May
- Summer
- June
- July
- August
- Autumun
- September
- October
- November
- Winter
- December
- January
- February
- Spring
- March
- April
- May
- Summer
- June
- July
- August
- Autumun
- September
- October
- November
- Winter
- December
- January
- February
E:nth-of-type(n) 疑似クラス
子要素のn番目にあたる要素にスタイルを適用します。
子要素は隣接している必要がなく間に別の要素が有ってもその要素はカウントしません。
サンプルではdd要素を頭から数えて奇数番目のdd要素に赤を4番目のdd要素に紫を指定してます。
#nthOfType dd{ margin-left:10px; } #nthOfType dd:nth-of-type(2n+1){ color:#F00; } #nthOfType dd:nth-of-type(4){ color:#90C; }html
ブラウザでの表示
- Spring
- March
- April
- May
- Summer
- June
- July
- August
- Autumun
- September
- October
- November
- Winter
- December
- January
- February
- Spring
- March
- April
- May
- Summer
- June
- July
- August
- Autumun
- September
- October
- November
- Winter
- December
- January
- February
E:last-of-type 疑似クラス
ある要素の同じ子要素の最後の要素にスタイルを適用します。
:nth-last-of-type()疑似クラスを使用して:nth-;ast-of-type(1)と書く事もできます。
サンプルでは最後のdd要素を赤にしています。
#lastOfType dd:last-of-type{ color:#F00; }html
ブラウザでの表示
- Spring
- March
- April
- May
- Summer
- June
- July
- August
- Autumun
- September
- October
- November
- Winter
- December
- January
- February
- Spring
- March
- April
- May
- Summer
- June
- July
- August
- Autumun
- September
- October
- November
- Winter
- December
- January
- February
E:last-child 疑似クラス
子要素の一番最後の要素にスタイルを適用します。
サンプルでは最後のdd要素を赤にしてます。
#lastChild dd:last-child{ color:#F00; }html
ブラウザでの表示
- Spring
- March
- April
- May
- Summer
- June
- July
- August
- Autumun
- September
- October
- November
- Winter
- December
- January
- February
- Spring
- March
- April
- May
- Summer
- June
- July
- August
- Autumun
- September
- October
- November
- Winter
- December
- January
- February
E:first-of-type 疑似クラス
ある要素の同じ子要素の最初の要素にスタイルを適用します。
:nth-of-type()疑似クラスを使用して:nth-of-type(1)と書く事もできます。
サンプルでは最初のdd要素を赤にしています。
#firstOfType dd:first-of-type{ color:#F00; }html
ブラウザでの表示
- Spring
- March
- April
- May
- Summer
- June
- July
- August
- Autumun
- September
- October
- November
- Winter
- December
- January
- February
- Spring
- March
- April
- May
- Summer
- June
- July
- August
- Autumun
- September
- October
- November
- Winter
- December
- January
- February
E:nth-last-of-type(n) 疑似クラス
子要素の最後から数えてn番目にあたる要素にスタイルを適用します。
子要素は隣接している必要がなく間に別の要素が有ってもその要素はカウントしません。
サンプルではdd要素を最後から数えて偶数番目のdd要素に赤を4番目のdd要素に紫を指定してます。
#nthLastOfType dd{ margin-left:10px; } #nthLastOfType dd:nth-last-of-type(2n){ color:#F00; } #nthLastOfType dd:nth-last-of-type(4){ color:#90C; }html
ブラウザでの表示
- Spring
- March
- April
- May
- Summer
- June
- July
- August
- Autumun
- September
- October
- November
- Winter
- December
- January
- February
- Spring
- March
- April
- May
- Summer
- June
- July
- August
- Autumun
- September
- October
- November
- Winter
- December
- January
- February
E:only-child 疑似クラス
ある要素内で子要素が唯一の場合にスタイルが適用されます。
サンプルではp要素の子要素がstrong要素だけの場合に赤になります。
#onlyChild p strong:only-child{ color:#F00; }html
ブラウザでの表示日本の首都は東京です。
アメリカの首都はワシントンです。
フランスの首都はパリです。中国の首都は北京です。
イギリスの首都はロンドンです。
日本の首都は東京です。
アメリカの首都はワシントンです。
フランスの首都はパリです。
中国の首都は北京です。
イギリスの首都はロンドンです。
E:only-of-type 疑似クラス
ある要素内で指定した要素が唯一の場合にスタイルが適用されます。
サンプルではp要素に子要素のstrong要素が1つだけの場合に赤が適用されます。
#onlyOfType p strong:only-of-type{ color:#F00; }html
ブラウザでの表示日本の首都は東京です。
アメリカの首都はワシントンです。
フランスの首都はパリです。中国の首都は北京です。
イギリスの首都はロンドンです。
日本の首都は東京です。
アメリカの首都はワシントンです。
フランスの首都はパリです。
中国の首都は北京です。
イギリスの首都はロンドンです。
E:empty 疑似クラス
要素内がテキストや空白など空の場合にスタイルが適用されます。
サンプルでは左下のセルが空白なので緑の背景が適応されます。
#empty td{ border:1px #ccc solid; } #empty td:empty{ background-color:#9C0; }html
ブラウザでの表示
td td td
td | td |
td |
E:target 疑似クラス
アンカーリンクで飛んだ先の要素にスタイルが適用されます。
アンカーリンククリック後にp要素に太字が適用されます。
#target:target p{ font-weight:bold; }html
ブラウザでの表示アンカーリンクで飛んだ先の要素にスタイルが適用されます。
アンカーリンクで飛んだ先の要素にスタイルが適用されます。
E:enabled UI要素状態擬似クラス
ユーザーインターフェース要素が有効となっている場合にスタイルが適用されます。
サンプルでは有効なtextareaに緑の背景が適用されます。
#enabled textarea:enabled{ background-color:#CF9; }html
ブラウザでの表示
E:disabled UI要素状態擬似クラス
ユーザーインターフェース要素が無効となっている場合にスタイルが適用されます。
サンプルでは無効なtextareaにグレーの背景が適用されます。
#disabled textarea:disabled{ background-color:#CCC; }html
ブラウザでの表示
E:checked UI要素状態擬似クラス
ラジオボタンやチェックボックスがチェックされた場合に適用されます。
サンプルではラジオボタンをチェックすると右マージンが10px適用されます。
#checked:checked{ margin-right:10px; }html
ブラウザでの表示
E:not(s) 否定擬似クラス
特定のセレクタ以外の要素にスタイルが適用されます。
サンプルではclass属性を持たないli要素に赤が適用されます。
#not li:not([class]){ color:#F00; }html
ブラウザでの表示
- りんご
- トマト
- 牛乳
- バナナ
- 鶏肉
- レタス
- りんご
- トマト
- 牛乳
- バナナ
- 鶏肉
- レタス
E ~ F 間接セレクタ
親要素が同じになる兄弟関係の弟にスタイルが適用されます。
E + F 隣接セレクタが直後の弟に適応されるのに対して、間接セレクタは間に別の要素が入っても適用されます。
サンプルではh2要素の弟にあたるh3要素に赤が適用されます。
#brother h2 ~ h3{ color:#F00; }html
ブラウザでの表示大見出し
中見出し
日本の首都は東京です。
中見出し
アメリカの首都はワシントンです。
中見出し
イギリスの首都はロンドンです。
大見出し
中見出し
日本の首都は東京です。
中見出し
アメリカの首都はワシントンです。
中見出し
イギリスの首都はロンドンです。