nlog

とめどなく流れるよだれ

たくさんのCSS セレクターデモ

css

※2018年3月18日時点

「CSS セレクター | MDN」を読んでそれぞれ試した。

デモの中で赤くなってるところがセレクターあたってるところ。ブラウザのサポート状況によってはデモの結果が確認できない場合があるので、そのときはMDNのページかCan I Useをチェック。

ミスがあると思うので、そこは指摘をもらって修正したい。

基本セレクター

要素型セレクター

span { ... }

クラスセレクター

.point { ... }

ID セレクター

#point { ... }

全称セレクター

* { ... }

属性セレクター

[type=email] { ... }

属性セレクターは [attr=value] 以外にも色々ある。詳しくはMDNで

結合子

隣接結合子

p + div { ... }

兄弟結合子

p ~ div { ... }

別名間接セレクター。

子結合子

ul > li { ... }

子孫結合子

ul li { ... }

疑似クラス

a:link { ... }

:hover

a:hover { ... }

:active

a:active { ... }

:visited

a:visited { ... }

:focus

input:focus { ... }

:focus-within

form:focus-within { ... }

:any-link { ... }

:enabled

:enabled { ... }

:disabled

:disabled { ... }

:required

:required { ... }

:optional

:optional { ... }

:valid

:valid { ... }

:invalid

:invalid { ... }

:read-only

input:read-only { ... }

:read-write

input:read-write { ... }

:empty

:empty { ... }

:checked

[type="radio"]:checked { ... }

:placeholder-shown

input:placeholder-shown { ... }

:in-range

:in-range { ... }

:out-of-range

:out-of-range { ... }

:indeterminate

:indeterminate { ... }

:first-child

li:first-child { ... }

:first-of-type

div :first-of-type { ... }

:last-child

li:last-child { ... }

:last-of-type

div :last-of-type { ... }

:nth-child

:nth-child(2n+1) { ... }

:nth-last-child

:nth-last-child(2n+1) { ... }

:nth-of-type

:nth-of-type(2n+1) { ... }

:nth-last-of-type

:nth-last-of-type(2n+1) { ... }

:only-child

div :only-child { ... }

:only-of-type

div :only-of-type { ... }

:root

:root { ... }

:scope

if (paragraph.matches(":scope")) {
  paragraph.style.color = 'red';
}

正直なところわかってない。W3C の Selectors Level 4でも「スコープ要素（:scope element）」って言葉が出てくるんだけど、これ何を指すのか理解できない。

:not()

:not(p) { ... }

:any

div :any(h1, h2, h3) { ... }

:default

:default + label { ... }

:lang

:lang(ja) { ... }

日本語では固定サイズでボタンを出したいけれど、文章が長くなるベトナム語やスペイン語では可変するボタンにしたい、という場合に使えるセレクター。

:dir()

:dir(rtl) { ... }

:target

:target { ... }

:fullscreen

:full-screen p { ... }

:first

@page :first { ... }

印刷に関するセレクター。

:left

@page :left { ... }

印刷に関するセレクター。

@page :right { ... }

印刷に関するセレクター。

疑似要素

::after

p::after { ... }

::before

p::before { ... }

::first-lettar

p::first-lettar { ... }

::first-line

p::first-line { ... }

::marker

li::marker { ... }

::placeholder

input::placeholder { ... }

::backdrop

dialog::backdrop { ... }

::backdrop 擬似要素を使いたいなら .showModal() API を使う。.show() API では疑似要素は適用されない。

::cue

.class::cue { ... }

::spelling-error

::spelling-error { ... }

::spelling-error がブラウザでサポートされると、"error" にセレクターがマッチするはず。

::grammar-error

::grammar-error { ... }

::grammar-error がブラウザでサポートされると、"a"、"are" にセレクターがマッチするはず。

::selection

::selection { ... }

::slotted

customElements.define('css-mokumoku-details',
  class extends HTMLElement {
    constructor() {
      ... 

      let style = document.createElement('style');
      style.textContent = '::slotted(*) { color: red; } ';

      shadowRoot.appendChild(style);
      shadowRoot.appendChild(templateContent.cloneNode(true));
  }
})

Shadow DOM の中だけで機能する。

::-webkit-progress-bar

.class::-webkit-progress-bar { ... }

::-webkit-progress-value

::-webkit-progress-value { ... }

::-moz-progress-bar

::-moz-progress-bar { ... }

::-ms-fill

::-ms-fill { ... }

::-webkit-slider-thumb

::-webkit-slider-thumb { ... }

::-moz-range-thumb

::-moz-range-thumb { ... }

::-ms-thumb

::-ms-thumb { ... }

::-webkit-slider-runnable-track

::-webkit-slider-runnable-track { ... }

::-moz-range-track

::-moz-range-track { ... }

::-ms-track

::-ms-track { ... }

::-moz-range-progress

::-moz-range-progress { ... }

::-ms-fill-lower

::-ms-fill-lower { ... }

::-ms-fill-upper

::-ms-fill-upper { ... }

これでセレクターは全部ではないし、すぐ増えそう

各ベンダー独自のセレクターはまだまだある。

また、このブログでも紹介した :has セレクターのように、Selectors Level 4で追加予定のものも多い。

参考