概要

セレクタとは、
要素やその他を選択して
CSSプロパティ値を適用する
HTML要素を伝えるものです。

セレクタと宣言ブロックとを組んだ物を、規則セットと呼びます。

言い方を変えると、セレクタとは宣言ブロックと要素とを紐づける物です。
選択札，選択紐と訳せるのかな。

例示

セレクタの一部を提示しています。

  1. /* === 基本セレクタ === */
  2. * { text-decoration: line-through;} /* --- 全称セレクタ --- */
  3. span { text-decoration: line-through;} /* --- 要素型セレクタ --- */
  4. .csnClass {text-decoration: line-through;} /* --- クラスセレクタ --- */
  5. #isnId { text-decoration: line-through;} /* --- ＩＤセレクタ --- */
  6. [class] { text-decoration: line-through;} /* --- 属性セレクタ --- */
  7. /* === グループ化セレクタ === */
  8. a, span {text-decoration: line-through;} /* --- セレクタリスト --- */
  9. /* === 結合子 === */
  10. div span { text-decoration: line-through;} /* --- 子孫結合子 --- */
  11. div > span { text-decoration: line-through;} /* --- 子結合子 --- */
  12. span ~ span {text-decoration: line-through;} /* --- 一般兄弟結合子 --- */
  13. div + p { text-decoration: line-through;} /* --- 隣接兄弟結合子 --- */
  14. /* === 疑似要素 === */
  15. span::before { content: "≪";}
  16. span::after { content: "≫";}
  17. p::first-letter {font-size: 2.0em;}
  18. *::first-line { text-decoration: line-through;}
  19. /* === 擬似クラス === */
  20. a:active { text-decoration: underline;}
  21. a:hover { text-decoration: underline;}
  22. a:focus { text-decoration: underline;}
  23. div > *:first-child { text-decoration: line-through;}
  24. div > *:last-child { text-decoration: line-through;}
  25. div > *:nth-child(2) { text-decoration: line-through;}
  26. div > *:nth-last-child(2) { text-decoration: line-through;}
  27. div > p:first-of-type { text-decoration: line-through;}
  28. div > p:last-of-type { text-decoration: line-through;}
  29. div > p:nth-of-type(2) { text-decoration: line-through;}
  30. div > p:nth-last-of-type(2) {text-decoration: line-through;}
  31. div > p:only-child { text-decoration: line-through;}
  32. div > p:only-of-type { text-decoration: line-through;}
  33. div > p:not([class]) { text-decoration: line-through;}
  34. p:empty {background: #ff0000;}
  35. a:link { text-decoration: underline;}
  36. p:target {background: #ff0000;}
  37. /* === 論理積 (ＡＮＤ) === */
  38. p[lang] {text-decoration: line-through;}

基本セレクタの説明

全称セレクタ

  1. <span>テキスト</span><br>
  2. <a href="#APHNEXT">リンク</a>
  1. * {text-decoration: line-through;}

*(アスタリスク) : すべての種類の要素を選択します。

テキスト
リンク

要素型セレクタ

  1. <span>テキスト</span><br>
  2. <a href="#APHNEXT">リンク</a>
  1. span {text-decoration: line-through;}

要素名で要素を選択します。

テキスト
リンク

クラスセレクタ

  1. <span class="csnClass">テキスト１</a>
  2. <span>テキスト２</span><br>
  1. .csnClass {text-decoration: line-through;}

class属性の値で要素を選択します。
class属性には複数の値が設定できます。なので属性セレクタで表すと [class~=class名] と同等となります。

テキスト１
テキスト２

ＩＤセレクタ

  1. <span id="isnId">テキスト１</a>
  2. <span>テキスト２</span><br>
  1. #isnId {text-decoration: line-through;}

id属性の値で要素を選択します。
id属性には単一の値だけが設定できます。なので属性セレクタで表すと [id=ID名] と同等となります。

テキスト１
テキスト２

属性セレクタ

  1. <span class="csnSample350">テキスト１</a>
  2. <span>テキスト２</span><br>
  1. [class] {text-decoration: line-through;}

指定された属性の存在や値で要素を選択します。

テキスト１
テキスト２
  • [lang] :
    lang属性の存在
  • [lang="en"] :
    lang属性の値に "en" だけ存在
  • [lang|="en"] :
    lang属性の値に "en" と一致するか、直後にハイフンが続く値(例えば"en-US")が存在
  • [lang^="en"] :
    lang属性の値に "en" で始まる値が存在
  • [lang$="en"] :
    lang属性の値に "en" で終わる値が存在
  • [lang*="en"] :
    lang属性の値に "en" を文字列中に含む値が存在
  • [lang~="en"] :
    lang属性の値に "en" と一致する値が存在

グループ化セレクタの説明

セレクタリスト

  1. <span>テキスト</span><br>
  2. <a href="#APHNEXT">リンク</a>
  1. a, span {text-decoration: line-through;}

, (カンマ) はグループ化の手段であり、一致するすべてを選択します。

テキスト
リンク

結合子の説明

子孫結合子

  1. <div><span>テキスト</span><br>
  2. <a href="#APHNEXT">リンク<span>１</span></a></div>
  1. div span {text-decoration: line-through;}

  (空白) は、第一のセレクタの子孫にあたる第二のセレクタを選択します。
セレクタというかCSS の文は複数行に渡ってひとつの記述ができる為に、グループ化の意図の行末の, (カンマ)の書き忘れが子孫結合子となりうるので注意が必要です。

テキスト
リンク１

子結合子

  1. <div><span>テキスト</span><br>
  2. <a href="#APHNEXT">リンク<span>１</span></a></div>
  1. div > span {text-decoration: line-through;}

> (大なり) は、第一のセレクタの子にあたる第二のセレクタを選択します。

テキスト
リンク１

一般兄弟結合子

  1. <span>テキスト</span><br>
  2. <a href="#APHNEXT">リンク<span>１</span></a><br>
  3. <span>テキスト</span>
  1. span ~ span {text-decoration: line-through;}

~ (チルダ) は、第一のセレクタと同じ親要素の子同士であって、第一のセレクタの後にある第二のセレクタを選択します。

テキスト
リンク１
テキスト

隣接兄弟結合子

  1. <div>テキスト<p>子供</p></div>
  2. <p>兄弟</p>
  3. <p>兄弟</p>
  1. div + p {text-decoration: line-through;}

+ (プラス) は、第一のセレクタと同じ親要素の子同士であって、第一のセレクタの直後にある第二のセレクタを選択します。
直後であって直近ではないので、間に別の要素があった場合は該当しない。

テキスト

子供

兄弟

兄弟

疑似要素の説明

疑似要素の一部を提示しています。

::before

  1. <span>テキスト</span>
  1. span::before {content:"≪";}

::before は、選択した要素の最初の子要素として擬似要素を作成します。

テキスト

::after

  1. <span>テキスト</span>
  1. span::after {content:"≫";}

::after は、選択した要素の最後の子要素として擬似要素を作成します。

テキスト

::first-letter

  1. <p>テキスト</p>
  1. p::first-letter {font-size: 2.0em;}

::first-letter は、ブロックレベル要素の最初の行の最初の文字に装飾を適用します。

テキスト

::first-line

  1. <p>テキストをすこしながめに</p>
  2. <span>テキストをすこしながめに</span>
  1. *::first-line { text-decoration: line-through;}

::first-line は、ブロックレベル要素の最初の行に装飾を適用します。

テキストをすこしながめに

テキストをすこしながめに

擬似クラスの説明

擬似クラスの一部を提示しています。

  1. a:active { text-decoration: underline;}
  2. a:hover { text-decoration: underline;}
  3. a:focus { text-decoration: underline;}
  4. div > *:first-child { text-decoration: line-through;}
  5. div > *:last-child { text-decoration: line-through;}
  6. div > *:nth-child(2) { text-decoration: line-through;}
  7. div > *:nth-last-child(2) { text-decoration: line-through;}
  8. div > p:first-of-type { text-decoration: line-through;}
  9. div > p:last-of-type { text-decoration: line-through;}
  10. div > p:nth-of-type(2) { text-decoration: line-through;}
  11. div > p:nth-last-of-type(2) {text-decoration: line-through;}
  12. div > p:only-child { text-decoration: line-through;}
  13. div > p:only-of-type { text-decoration: line-through;}
  14. div > p:not([class]) { text-decoration: line-through;}
  15. p:empty {background: #ff0000;}
  16. a:link { text-decoration: underline;}
  17. p:target {background: #ff0000;}

論理積 (ＡＮＤ)

「Ａであり、かつＢである」としたい場合、セレクタを空白なく続けてＡＢと書きます。
要素同士のＡＮＤ条件はそもそも発生しないので、ＡとＢの区分けは大丈夫と思われます。
「Ａであり、かつＡである」(ＡＡ)という記述も出来るので、詳細度を調整するのに使えます。

  1. <p>テキスト１</p>
  2. <div lang="ja" >テキスト２</div>
  3. <p lang="ja" >テキスト３</p>
  1. p[lang] {text-decoration: line-through;}

「p要素であり、かつlang属性がある」要素を選択します。

テキスト１

テキスト２

テキスト３