基本的な構文

まとめて指定するとき

上 右 下 左 の順になる。
W3C-Syntax and basic data types

セレクタ{
宣言ブロック
プロパティ:値;
}

セレクタ
スタイルが適用される対象を示す

セレクタ

*はすべての要素に適用される。

*{}

|

|で分けると
名前空間|要素
になる

svg|rect { color: red; }

, カンマ

カンマでグルーピングができる。
下記の例では、h1, h2, h3, h4, h5, h6 に対してスタイルを適用します。

h1, h2, h3, h4, h5, h6 { color: red; }

親子・兄弟関係で指定

+で隣接兄弟

h1 + div { border: 1px solid gray; }
<div>スタイルは適用されません。</div>
<h1>ヘッダ</h1>
<div>スタイルが適用されます。</div>
<div>スタイルは適用されません。</div>

ダイナミック疑似クラス

  • link
  • visited
  • active
  • hover
  • focus
サポートサイト Wikidot.com