はじめに
- セレクタとはスタイルを適用する対象を指定するものです
- h1・・・セレクタ
- color・・・プロパティ
- red・・・(プロパティの)値
h1 { color: red; }
シンプルセレクタ
1. ユニバーサルセレクタ(すべての要素に適用)
* { color: red; }
2. タイプセレクタ(指定した名前の要素に適用)
div { color: red; }
3. IDセレクタ(指定したid名がある要素に適用)
#foo { color: red; }
4. クラスセレクタ(指定したclass名がある要素に適用)
.foo { color: red; }
5. 属性セレクタ(属性attrが指定された要素に適用)
[foo="bar"] { color: red; } /* foo属性の値がbarの要素 */
[foo^="bar"] { color: red; } /* foo属性の値がbarで始まっている要素 */
[foo$="bar"] { color: red; } /* foo属性の値がbarで終わっている要素 */
[foo*="bar"] { color: red; } /* foo属性の値がbarを含む要素 */
A[foo="bar"] { color: red; } /* foo属性の値がbarのA要素 */
結合子
6. 子孫/子/隣接セレクタ(ドキュメントの構造に応じて適用)
A B { color: red; } /* Aの階層下のすべてのBに適用 */
A > B { color: red; } /* Aの1階層下のBに適用 */
A + B { color: red; } /* Aの階直後のBに適用 */
グループ化
7. 複数のセレクタに同じ設定をするときに利用する
- カンマ区切りで記述する
A, B { color: red; }
疑似クラス
8. 構造疑似クラス(～番目の要素に適用)
- :nth-child()
- :first-child
- :last-child
- :nth-type-of()
奇数と偶数の要素に適用
foo:nth-child(odd) { color: red; } /* 奇数番目のfoo要素に適用 */
foo:nth-child(even) { color: blue; } /* 偶数番目のfoo要素に適用 */
連続した要素に繰り返し適用
foo:nth-child(3n+1) { color: red; }
foo:nth-child(3n+2) { color: blue; }
foo:nth-child(3n+3) { color: yellow; }
foo:nth-child(-n+3) { color: pink; } /* 最初の3つの要素だけ適用 */
- ()内には「αn + β」という形で指定できる
- 算出結果は0より大きい正の整数が有効値
9. リンク疑似クラス
a:link { color: green; } /* 未アクセス */
a:visited { color: gray; } /* アクセス済 */
10. ユーザーアクション疑似クラス
a:hover { color: orange; } /* カーソルを重ねたとき */
a:focus { color: hotpink; } /* リンクを選択したとき */
a:active { color: red; } /* リンクをクリックしたとき */
11. ターゲット疑似クラス
#foo { background-color: yellowgreen; }
#foo:target { background-color: red; } /* #fooへのリンクをクリックしたとき */
12. 言語疑似クラス
:lang(foo) { color: blue; } /* lang属性をfoo指定した要素に適用 */
13. UI疑似クラス
:enabled { color: green; }
:disabled { color: gray; }
:checked { background-color: yellowgreen; }
:indeterminate { background-color: lightgray; }
14. 否定疑似クラス
:not(foo) { color: green; } /* fooでない要素に適用 */
疑似要素
15 ::first-line疑似要素
::first-line { color: red; } /* 要素の1行目に適用 */
16. ::first-letter疑似要素
::first-letter { font-size: 30px; } /* 要素の1文字目に適用 */
17. ::before/::after疑似要素
foo::before, foo::after { content: "☆" } /* foo要素の前後に適用 */
テキスト"hogehoge"の要素
:contains('hogehoge')
スタイルシートの優先順位
- インラインスタイルシートが第１優先
<ELEMENT style="">
- 内部/外部スタイルシートは後に定義したものが優先される
<!- 内部スタイルシート -->
<style type="text/css"></style>
<!- 外部スタイルシート -->
<link rel="stylesheet" type="text/css" href="cssファイル" />
セレクタの優先順位
- 以下のようなHTMLにスタイルを適用する場合
<div>
<p id="qiita">Qiita</p>
</div>
- 後述したものが優先される
- colorはblueが適用される
p { color: red; }
p { color: blue; }
- 子孫セレクタの形で記述したものが優先される
- colorはredが適用される
div p { color: red; }
p { color: blue; }
- IDセレクタの形で記述したものが優先される
- colorはyellowが適用される
#qiita { color: yellow; }
div p { color: red; }
p { color: blue; }
- CSSセレクタの優先順位の計算方法については以下を参照してください
～ただの宣伝～
- 全国のSeleniumer必読
- Seleniumerといっていますが、Selenium, SauceLabs, Travis, Jenkinsに関するノウハウ書いているのでよかったら参考にしてみてください