ふかぼれ！CSSセレクターモジュール / Fukabore! CSS Selectors Module

Slide 1

Slide 1 text

ふかぼれ！ CSS セレクターモジュール福岡フロントエンド勉強会 #2 pixiv Inc. 森内建太 petamoriken 2024.11.8

Slide 2

Slide 2 text

2 自己紹介 ● Web エンジニア ● Deno コントリビューター ● ECMAScript や Web 標準を追うのが好き petamoriken カスタマーオペレーション＆セーフティ本部オペレーション開発部

Slide 3

Slide 3 text

Slide 4

Slide 4 text

4 © ンバヂ https://x.com/nbaji9 https://www.nicovideo.jp/watch/sm42515407

Slide 5

Slide 5 text

JavaScript 好きですが今日は CSS の話をします 5

Slide 6

Slide 6 text

6 CSS で（HTML の）要素選択に使われるパターンのこと以下の例だと ul や ul > li がそれにあたる CSS セレクター

Slide 7

Slide 7 text

7 ※ 以降見やすくするために DOM ツリーを AA で表します

Slide 8

Slide 8 text

8 単純セレクター（Simple Selector）特定要素にマッチ

Slide 9

Slide 9 text

9 全称セレクター（Universal Selector）全ての要素にマッチ

Slide 10

Slide 10 text

10 セレクターリスト複数のセレクターをまとめて記述できる

Slide 11

Slide 11 text

結合子などを使った複雑セレクター 11

Slide 12

Slide 12 text

12 子孫結合子（Descendant Combinator）前のセレクターの子孫要素にマッチ

Slide 13

Slide 13 text

13 子結合子（Child Combinator）前のセレクターの子要素にマッチ

Slide 14

Slide 14 text

14 （余談）@scope ● 子孫結合子、子結合子だと子孫要素の途中で打ち切ることが出来ない ● @scope で途中の子孫要素までで打ち切ることができる

Slide 15

Slide 15 text

15 後続兄弟結合子（Subsequent-sibling Combinator）前のセレクターの後ろの兄弟要素にマッチ

Slide 16

Slide 16 text

16 次兄弟結合子（Next-sibling Combinator）前のセレクターの直後の兄弟要素にマッチ

Slide 17

Slide 17 text

17 :not() セレクターに該当しない要素にマッチ引数を複数取れる :not(P, Q) と :not(P):not(Q) は等価

Slide 18

Slide 18 text

18 :is() と :where() セレクターリストを一つにまとめられる A B, D B とだいたい等価不正なセレクターが混ざっても無視される違いがある :is() と :where() は詳細度が違う

Slide 19

Slide 19 text

19 :nth-child() と :nth-last-child() 兄弟要素の位置でマッチ 2n + 1 は odd（奇数） 2n は even（偶数）とも書ける

Slide 20

Slide 20 text

20 :nth-child() と :nth-last-child() of で兄弟要素から該当する要素における位置でマッチさせる事ができる

Slide 21

Slide 21 text

21 :has() （相対）セレクターでマッチ子孫から親要素であったり、前の兄弟要素であったりと逆向きに辿ることができる

Slide 22

Slide 22 text

22 :empty 子に要素やテキストを持たない要素にマッチ子がホワイトスペーステキストのみでもマッチするが、まだどのブラウザも対応してない

Slide 23

Slide 23 text

23 ● CSS セレクターモジュールには結構多くの機能がある ○ 今日紹介出来なかったのもある ● 子孫結合子、子結合子を覚えておけばなんとかなる ○ 他の機能を使うと記述が楽になることがあるので余力があれば知っておけば良さそう所感