CSS Reference
:where()
複数のセレクタを引数でまとめて記述する(詳細度ゼロ)
:where()
疑似クラスは、引数としてセレクタを指定することが可能な疑似クラスです。引数として複数のセレクタをまとめて記述することで、その中のいずれか 1つに当てはまる要素にマッチさせることができます。
使用方法としては :is()
疑似クラスと同様になりますが、:is()
疑似クラスとの差異は、:where()
疑似クラスにおいて記述されたセレクタの詳細度が、常に「0」となる点です。
つまり、:where()
疑似クラスを使用して記述されたスタイル宣言は、容易に他のスタイルで上書き可能ということになります。
例えば、
:where(div.example, section.example, article.example, aside.example) p { font-size: 1rem; }
と記述したものを、
aside p { font-size: 1.25rem; }
のような記述で上書きすることが可能です。これは、例えば reset.css のような、初期値として読み込んでおきたいが、他のスタイルで上書きする際にその詳細度が問題になるのは困る、といったシチュエーションで有用です。
:where()のサンプルソース
:where(div, section, article, aside) p { font-size: 1rem; }
主要ブラウザの対応
IE11 | × |
---|---|
Edge(EdgeHTML) | × |
Edge(Chromium) | ○Edge 88+ |
Chrome | ○Chrome 88+ |
Firefox | ○Firefox 78+ |
Safari | ○Safari 14+ |
iOS Safari | ○ |
Android Chrome | ○Chrome 97+ |
関連する疑似クラス
- :active
- :first-child
- :first-of-type
- :last-child
- :last-of-type
- :nth-child()
- :nth-of-type()
- :nth-last-child()
- :nth-last-of-type()
- :only-child
- :only-of-type
- :empty
- :root
- :link
- :visited
- :any-link
- :hover
- :focus
- :focus-within
- :host
- :target
- :lang()
- :not()
- :fullscreen
- :left
- :right
- :first
- :enabled
- :disabled
- :checked
- :default
- :in-range
- :out-of-range
- :valid
- :invalid
- :required
- :optional
- :read-write
- :read-only
- :defined
- :indeterminate
- :placeholder-shown
- :is()
- :focus-visible
- :has()
用途から CSS プロパティやセレクタを探す
用途から CSS プロパティやセレクタを逆引きできます。
- 疑似クラス
-
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :target
- :valid
- :visited
- :where()
対応ブラウザから CSS プロパティやセレクタを探す
対応ブラウザから CSS プロパティやセレクタを逆引きできます。
- IE11
-
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::selection
- :active
- :checked
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :placeholder-shown
- :required
- :right
- :root
- :target
- :valid
- :visited
- @charset
- @keyframes
- ID セレクタ
- attr()
- background
- background-color
- calc()
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Edge(EdgeHTML)
-
- ::after
- ::backdrop
- ::before
- ::first-letter
- ::first-line
- ::placeholder
- ::selection
- :active
- :checked
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :fullscreen
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :read-only
- :read-write
- :required
- :right
- :root
- :target
- :valid
- :visited
- @charset
- @keyframes
- @supports
- ID セレクタ
- attr()
- background
- background-color
- calc()
- minmax()
- prefers-color-scheme
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Edge(Chromium)
-
- ::after
- ::backdrop
- ::before
- ::cue
- ::first-letter
- ::first-line
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :target
- :valid
- :visited
- @charset
- @keyframes
- @layer
- @supports
- ID セレクタ
- accent-color
- attr()
- background
- background-color
- calc()
- clamp()
- max()
- min()
- minmax()
- prefers-color-scheme
- scroll-behavior
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Firefox
-
- ::after
- ::backdrop
- ::before
- ::cue
- ::first-letter
- ::first-line
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :target
- :valid
- :visited
- :where()
- @charset
- @keyframes
- @layer
- @scroll-timeline
- @supports
- ID セレクタ
- accent-color
- attr()
- background
- background-color
- calc()
- clamp()
- max()
- min()
- minmax()
- prefers-color-scheme
- scroll-behavior
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Chrome
-
- ::after
- ::backdrop
- ::before
- ::cue
- ::first-letter
- ::first-line
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :target
- :valid
- :visited
- @charset
- @keyframes
- @layer
- @supports
- ID セレクタ
- accent-color
- attr()
- background
- background-color
- calc()
- clamp()
- max()
- min()
- minmax()
- prefers-color-scheme
- scroll-behavior
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Safari
-
- ::after
- ::before
- ::cue
- ::first-letter
- ::first-line
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited
- @charset
- @keyframes
- @layer
- @supports
- ID セレクタ
- accent-color
- attr()
- background
- background-color
- calc()
- max()
- min()
- minmax()
- prefers-color-scheme
- scroll-behavior
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- iOS Safari
-
- ::after
- ::before
- ::cue
- ::first-letter
- ::first-line
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :has()
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :root
- :target
- :valid
- :visited
- @charset
- @keyframes
- @layer
- @supports
- ID セレクタ
- accent-color
- attr()
- background
- background-color
- calc()
- max()
- min()
- minmax()
- prefers-color-scheme
- scroll-behavior
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ
- Android Chrome
-
- ::after
- ::backdrop
- ::before
- ::cue
- ::first-letter
- ::first-line
- ::placeholder
- ::selection
- ::slotted()
- :active
- :any-link
- :checked
- :default
- :defined
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :host
- :hover
- :in-range
- :indeterminate
- :invalid
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :target
- :visited
- @charset
- @keyframes
- @supports
- ID セレクタ
- accent-color
- attr()
- background
- background-color
- calc()
- clamp()
- max()
- min()
- minmax()
- prefers-color-scheme
- scroll-behavior
- クラスセレクタ
- タイプセレクタ
- ユニバーサルセレクタ
- 子セレクタ
- 子孫セレクタ
- 属性セレクタ
- 間接セレクタ
- 隣接セレクタ