tips:cssのセレクター

stylusを使っていて、cssのセレクター指定方法がよくわかっていなかったので調べた。

出典

リンク	備考
Selectors	W3C仕様
https://developer.mozilla.org/ja/docs/Web/CSS/:has	has( ）の説明
https://webliker.info/css-selector-cheat-sheet/	CSSセレクタのチートシート

CSSの セレクター = sytleをどのHTMLタグに適用するかのマッチング指定

A の子孫の B にマッチ (孫も含む)

A B {指定}

A の直接の子の B にマッチ (直接の子のみ)

A>B {指定}
A > B {指定} でも同じ

A の後の B にマッチ (AとBは同階層)

A~B {指定}

A の直後の B にマッチ (AとBは同階層、直後のみ)

A+B {指定}

B を子孫に持つ A にマッチ

A:has(B) {指定}
A :has(B) {指定} でも同じ

B を直接の子に持つ A にマッチ

A:has(>B) {指定}
A :has(>B) {指定} でも同じ

A と B にマッチ

A,
B {指定}

attr属性指定がある Aにマッチ、と 属性値の完全一致、前方一致、中間一致、後方一致

A[attr] {指定}
A[attr="abc"] {指定}
A[attr^="abc"] {指定}
A[attr*="pqr"] {指定}
A[attr$="xyz"] {指定}

属性のうちidの場合の古い記法

A#name {指定}
A[id="name"] {指定} と同じ

属性のうちclassの場合の古い記法

A.name {指定}
A[class="name"] {指定} と同じ

---

スペース自体が区切り記号として意味を持ってしまっていて、スペースが単なるスペースにならない場合がある。
具体的には "+" の周囲と ">" の周囲でスペース文字が違う意味になってしまう(?)ようで、いやらしい。
おそらく仕様がつぎつぎに追加されたためなのだろう、仕方がない。
余計なスペースを空けないのが統一的で良いかも。