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
120
ふかぼれ!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 / 森建
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
3
790
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
450
DOM Observable
petamoriken
1
180
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
550
Contributing to Deno is fun!
petamoriken
0
280
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.3k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.2k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
790
Multithreading WebAssembly by Rust
petamoriken
3
1k
Other Decks in Programming
See All in Programming
Tauriでネイティブアプリを作りたい
tsucchinoko
0
350
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
160
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.3k
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
160
Tuning GraphQL on Rails
pyama86
2
1.2k
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
580
Realtime API 入門
riofujimon
0
140
受け取る人から提供する人になるということ
little_rubyist
0
180
ヤプリ新卒SREの オンボーディング
masaki12
0
110
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
3k
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
220
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
17
4.3k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
32
1.5k
We Have a Design System, Now What?
morganepeng
50
7.2k
Statistics for Hackers
jakevdp
796
220k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Fireside Chat
paigeccino
33
3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
The Cult of Friendly URLs
andyhume
78
6k
Facilitating Awesome Meetings
lara
49
6.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
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 セレクターモジュールには結構多くの機能がある ◦ 今日紹介出来なかったのもある • 子孫結合子、子結合子を覚えておけばなんとかなる ◦ 他の機能を使うと記述が楽になることがあるので 余力があれば知っておけば良さそう
所感