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
160
ふかぼれ!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
4
1.2k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
460
DOM Observable
petamoriken
1
190
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
560
Contributing to Deno is fun!
petamoriken
0
290
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.4k
linaria: Zero-Runtime CSS in JS
petamoriken
2
2.2k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
800
Multithreading WebAssembly by Rust
petamoriken
3
1k
Other Decks in Programming
See All in Programming
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
150
@nifty天気予報のフロントエンドを 実装するまで - NIFTY Tech Talk #22
niftycorp
PRO
0
110
cmp.Or に感動した
otakakot
3
300
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
110
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
260
C++でシェーダを書く
fadis
6
4.2k
Arm移行タイムアタック
qnighy
0
370
距離関数を極める! / SESSIONS 2024
gam0022
0
320
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
3
1.3k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
490
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.9k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
222
8.9k
A Tale of Four Properties
chriscoyier
156
23k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Making Projects Easy
brettharned
115
5.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Designing Experiences People Love
moore
138
23k
How STYLIGHT went responsive
nonsquared
95
5.2k
The Cult of Friendly URLs
andyhume
78
6.1k
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 セレクターモジュールには結構多くの機能がある ◦ 今日紹介出来なかったのもある • 子孫結合子、子結合子を覚えておけばなんとかなる ◦ 他の機能を使うと記述が楽になることがあるので 余力があれば知っておけば良さそう
所感