Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Mo...
Search
petamoriken / 森建
November 08, 2024
Programming
0
200
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
福岡フロントエンド勉強会 #2
https://connpass.com/event/333108/
petamoriken / 森建
November 08, 2024
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
460
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
1.7k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
500
DOM Observable
petamoriken
1
220
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
630
Contributing to Deno is fun!
petamoriken
0
330
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.6k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.3k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
830
Other Decks in Programming
See All in Programming
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
150
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
570
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
120
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
定理証明プラットフォーム lapisla.net
abap34
1
1.8k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
560
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
時計仕掛けのCompose
mkeeda
1
300
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
51
17k
動作確認やテストで漏れがちな観点3選
starfish719
6
1.1k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
920
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
580
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
40
2.5k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Gamification - CAS2011
davidbonilla
80
5.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Site-Speed That Sticks
csswizardry
4
380
YesSQL, Process and Tooling at Scale
rocio
172
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Building Applications with DynamoDB
mza
93
6.2k
Transcript
ふかぼれ! CSS セレクターモジュール 福岡フロントエンド勉強会 #2 pixiv Inc. 森内建太 petamoriken 2024.11.8
2 自己紹介 • Web エンジニア • Deno コントリビューター • ECMAScript や Web 標準 を追うのが好き petamoriken カスタマーオペレーション
&セーフティ本部 オペレーション開発部
3
4 © ンバヂ https://x.com/nbaji9 https://www.nicovideo.jp/watch/sm42515407
JavaScript 好きですが 今日は CSS の話をします 5
6 CSS で(HTML の)要素選択に使われるパターンのこと 以下の例だと ul や ul > li がそれにあたる CSS セレクター
7 ※ 以降見やすくするために DOM ツリーを AA で表します
8 単純セレクター(Simple Selector) 特定要素にマッチ
9 全称セレクター(Universal Selector) 全ての要素にマッチ
10 セレクターリスト 複数のセレクターをまとめて 記述できる
結合子などを使った複雑セレクター 11
12 子孫結合子(Descendant Combinator) 前のセレクターの子孫要素に マッチ
13 子結合子(Child Combinator) 前のセレクターの子要素に マッチ
14 (余談)@scope • 子孫結合子、子結合子だと子孫要素の途中で打ち切る ことが出来ない • @scope で途中の子孫要素までで打ち切ることができる
15 後続兄弟結合子(Subsequent-sibling Combinator) 前のセレクターの後ろの兄弟 要素にマッチ
16 次兄弟結合子(Next-sibling Combinator) 前のセレクターの直後の兄弟 要素にマッチ
17 :not() セレクターに該当しない要素に マッチ 引数を複数取れる :not(P, Q) と :not(P):not(Q) は等価
18 :is() と :where() セレクターリストを一つに まとめられる A B, D B とだいたい等価 不正なセレクターが混ざっても 無視される違いがある
:is() と :where() は詳細度が違う
19 :nth-child() と :nth-last-child() 兄弟要素の位置でマッチ 2n + 1 は odd(奇数) 2n は even(偶数) とも書ける
20 :nth-child() と :nth-last-child() of で兄弟要素から該当する要素 における位置でマッチさせる事 ができる
21 :has() (相対)セレクターでマッチ 子孫から親要素であったり、前 の兄弟要素であったりと逆向き に辿ることができる
22 :empty 子に要素やテキストを持たない 要素にマッチ 子がホワイトスペーステキスト のみでもマッチするが、まだど のブラウザも対応してない
23 • CSS セレクターモジュールには結構多くの機能がある ◦ 今日紹介出来なかったのもある • 子孫結合子、子結合子を覚えておけばなんとかなる ◦ 他の機能を使うと記述が楽になることがあるので 余力があれば知っておけば良さそう
所感