CHROMA

世の中の "当たり前" を確認する

CSS3で追加されたセレクタ

Dev

CSS3で追加された属性セレクタ

  • E[foo^="bar"]
    foo（属性名）で指定した値が、"bar"で始まる場合に適用
    ex) object[type^="../image/"]{スタイルの指定}
  • E[foo$="bar"]
    foo（属性名）で指定した値が、"bar"で終わる場合に適用
    ex) a[href$=".html"]{スタイルの指定}
  • E[foo="bar"]
    foo（属性名）で指定した値に、"bar"が含まれる場合に適用
    ex) p[title    ="hello"]{スタイルの指定}

CSS3で追加された擬似クラス

  • E:root
    ルート要素（HTMLではhtml要素）に適用されます
    ex) :root{スタイルの指定}
  • E:nth-child(n)
    同じ要素を持つ兄弟の要素で、前から一定間隔の要素に適用
    exA(奇数行の要素に適用) tr:nth-child(2n+1){スタイルの指定} / tr:nth-child(odd){スタイルの指定}
    exB(偶数行の要素に適用) tr:nth-child(2n+0){スタイルの指定} / tr:nth-child(even){スタイルの指定}
  • E:nth-last-child(n)
    同じ要素を持つ兄弟の要素で、後ろから一定間隔の要素に適用
    exA(後ろから奇数行の要素に適用) tr:nth-last-child(2n+1){スタイルの指定} / tr:nth-last-child(odd){スタイルの指定}
    exA(後ろから偶数行の要素に適用) tr:nth-last-child(2n+0){スタイルの指定} / tr:nth-last-child(even){スタイルの指定}
  • E:nth-of-type(n)
    同じ要素を持つ兄弟の要素で、前から一定間隔の同一要素に適用
  • E:nth-last-of-type(n)
    同じ要素を持つ兄弟の要素で、後ろから一定間隔の同一要素に適用
  • E:first-child
    同じ要素を持つ兄弟の要素で、最初の要素に適用
  • E:last-child
    同じ要素を持つ兄弟の要素で、最後の要素に適用
  • E:first-of-type
    同じ要素を持つ兄弟の要素で、最初の同一要素に適用
  • E:last-of-type
    同じ要素を持つ兄弟の要素で、最後の同一要素に適用
  • E:only-child
    1つしかない要素に適用
  • E:only-of-type
    同じ要素を持つ兄弟の要素で、1つしかない子要素に適用
  • E:empty
    子要素がないから要素に適用

CSS3で追加されたターゲット擬似クラス

  • E:target リンクのターゲットに適用

UI要素擬似クラス

  • E:enabled, E:disabled
    disabled属性がない要素（:enabled）、もしくはdisabled属性が指定されている要素（:disabled）に適用
  • E:checked
    checked属性がある要素（checked状態のチェックボックスなど）に適用
  • E:not(s)
    指定したセレクタと一致しない要素に適用
  • E ~ F（一般兄弟結合子）
    要素「E」の後に記述されている要素「F」に適用