CSSの便利なセレクタ

css-selector.md

• 子要素：1階層以上下にあるすべての要素。
• 直下：1階層下にあるすべての要素（2階層以上下の要素は含まない）。
• 隣接：同じ階層に並んでいる要素のうち、特定の要素の次にある要素。
• 後ろにある：同じ階層にある、特定の要素以降のすべての要素。

結合子

クラスなどを複数指定した状態を「結合子」と呼びます。

.fooの子要素.bar

.bar {
  .foo & {

  }
}

.fooの直下の子要素.bar（2階層以降の子要素は適応されない）

.bar {
  .foo > & {
    
  }
}

.barに.fooが追加された要素

.bar {
  &.foo {
    
  }
}

.fooと隣接している（同じ階層にある）.foo

あるクラスの2つ目以降にmarginを指定したい場合などに多用します（後述する:not(:first-of-type)でも可能）。

.foo {
  & + & {
    
  }
}

.fooの後ろにある（すべての）要素

.foo {
  & ~ * {
    
  }
}

.foo直下のすべての要素

.foo {
  & > * {

  }
}

擬似クラス

「x番目の要素」や「最後の要素」、「x番目以降の要素」のような比較的シンプルで使用頻度の高いセレクタです。

.fooの3番目の要素

.foo {
  &:nth-of-type(3) {

  }
}

.fooの3番目以降の要素

.foo {
  &:nth-of-type(n+3) {

  }
}

.fooの奇数の要素（:nth-of-type(2n+1)でも可能）

.foo {
  &:nth-of-type(odd) {

  }
}

.fooの偶数の要素（:nth-of-type(2n)でも可能）

.foo {
  &:nth-of-type(even) {

  }
}

.fooの3の倍数の要素

.foo {
  &:nth-of-type(3n) {

  }
}

.fooの1つ目の要素とそれ以降の3の倍数の要素

下記のセレクタで「1, 4, 7, 10」のように指定できます。

.foo {
  &:nth-of-type(3n+1) {

  }
}

.fooの最初の要素

.foo {
  &:first-of-type {

  }
}

.fooの最後の要素

.foo {
  &:last-of-type {

  }
}

.fooの最初の要素以外の要素（ :nth-of-type(n+2)でも可能）

.foo {
  &:not(:first-of-type) {

  }
}

.fooの最後の要素以外の要素

.foo {
  &:not(:last-of-type) {

  }
}

.fooを最初から数えて3番目までの要素

.foo {
  &:nth-of-type(-n+3) {

  }
}

.fooを最後から数えて3番目の要素

.foo {
  &:nth-last-of-type(3) {

  }
}

.fooの奇数の要素でなおかつ最後の要素

.foo {
  &:nth-of-type(odd):last-of-type {

  }
}

.fooの直下にある最初の子要素

.foo {
  & > :first-child {

  }
}

.fooの直下にある最後の子要素

.foo {
  & > :last-child {

  }
}

属性セレクタ

[class=""]のようにすると正規表現のように指定できます。

.foo直下のクラス名がbarで始まる要素

.foo {
  & > [class^="bar"] {

  }
}

.foo直下のクラス名がbarで終わる要素

.foo {
  & > [class$="bar"] {

  }
}

.foo直下のクラス名がbarを含む要素

.foo {
  & > [class*="bar"] {

  }
}

.fooの属性aria-hiddenがfalseに変更された要素

.foo {
  &[aria-hidden="false"] {

  }
}

.foo直下のクラス名を持たない要素

.foo {
  & > :not([class]) {

  }
}

#foo

IDを属性セレクタで指定すると、#fooとするよりも詳細度を低くできます。

• #foo -> 0, 1, 0, 0
• [id="foo"] -> 0, 0, 1, 0
• [class="foo"] -> 0, 0, 1, 0

[id="foo"] {

}

以下のようにクラス属性を連結することで少しずつ詳細度を上げることもできます。

1. .foo -> 0, 0, 1, 0
2. .foo.foo -> 0, 0, 2, 0
3. .foo.foo.foo -> 0, 0, 3, 0

詳細度の計算方法

詳細度は4つの数値で計算されます。左からstyle属性、ID属性、（擬似）クラス属性、要素です。
左の数値から検証して数が多いほうが適応、数が同じであれば右の数値へと移ります。すべての数値が同じ場合は後から読み込まれたセレクタが適応されます。

ただし、importantが指定されているプロパティは詳細度に関係なく優先されますし、利用者がスタイルシートを指定している場合はそれが最優先で適応されます。

詳しくはこちら

Quantity Queries

「Quantity Queries」というテクニックを使うと、「要素が3つ以上あったら、そのすべての要素を変更する」といったことができます。

「Quantity Queries」のテストツール

.foo内の.barが3つ以上の場合の.barすべて

最初のセレクタで3つ目の.bar、2つ目のセレクタで4つ目以降の.barをすべて選択します。

.bar {
  .foo &:nth-last-child(n+3),
  .foo &:nth-last-child(n+3) ~ & {

  }
}

.foo内の.barが3つ以下の場合の.barすべて

.bar {
  .foo &:nth-last-child(-n+3):first-child,
  .foo &:nth-last-child(-n+3):first-child ~ & {

  }
}

.foo内の.barが3つ以上かつ4つ以下（つまり要素の数が3~4の場合）の.barすべて

.bar {
  .foo &:nth-last-child(n+3):nth-last-child(-n+4):first-child,
  .foo &:nth-last-child(n+3):nth-last-child(-n+4):first-child ~ & {

  }
}