CSS

セレクタ

Selectors Level 3

セレクタのタイプ

*	全て
E	要素セレクタ
E#x	IDセレクタ
E.x	クラスセレクタ
E[x]	属性セレクタ、属性値によって選択する
E:x	疑似クラスセレクタ、ユーザ操作や要素の位置、数などで特定の状態である要素を選択する
E::x	疑似要素セレクタ、HTMLの要素ではない部分を要素のようにを選択する
E1 E2	子孫セレクタ、E1の子孫要素であるE2
E1 > E2	子セレクタ、E1の子要素であるE2
E1 + E2	隣接セレクタ、E1の次の弟要素であるE2
E1 ~ E2	間接セレクタ、E1の全ての弟要素であるE2
E:not(s)	否定疑似クラスセレクタ、sで指定したセレクタに該当しないE

属性セレクタ

E[attr]	attr属性を持つE要素
E[attr=“hoge”]	値がhogeであるattr属性を持つE要素
E[attr*=“hoge”]	値がhogeに部分一致するattr属性を持つE要素
E[attr^="hoge"]	値がhogeに前方一致するattr属性を持つE要素
E[attr$=“hoge”]	値がhogeに後方一致するattr属性を持つE要素
E[attr~=“hoge”]	値がhogeであるattr属性を持つE要素、値を複数もつ場合はどれか一つが一致すればよい
E[attr\|="hoge"]	値をハイフン区切りし、そのうちどれかがhogeであるattr属性を持つE要素

疑似クラスセレクタ

E:root	ルート要素、HTML文書ではhtml要素のこと
E:nth-of-type(n)	兄弟要素中のE要素でn番目のもの
E:nth-last-of-type(n)	兄弟要素中のE要素で後ろからn番目のもの
E:first-of-type	兄弟要素中のE要素で最初のもの＝ E:nth-of-type(1)
E:last-of-type	兄弟要素中のE要素で最後のもの＝ E:nth-last-of-type(1)
E:only-of-type	兄弟にE要素がひとつしかない場合、そのE要素
E:nth-child(n)	兄弟の中でn番目にあるE要素
E:nth-last-child(n)	兄弟の中で後ろからn番目にあるE要素
E:first-child	兄弟の中で最初の要素であるE
E:last-child	兄弟の中で最後の要素であるE
E:only-child	兄弟要素のないE要素
E:empty	子要素の無いE要素
E:link	リンク
E:visited	訪問済みリンク
E:active	アクティブ
E:hover	マウスオーバー
E:focus	フォーカス
E:target	ページ内リンクターゲット
E:lang(fr)	言語
E:enabled	有効
E:disabled	無効
E:checked	チェック
E:indeterminate	JavaScriptでindeterminateがtrueにされた場合

xxxx-childとxxxx-of-typeは兄弟要素の中の位置、順番で指定する疑似クラス。childは全ての兄弟要素が数え上げの対象になるが、of-typeでは自分と同一種類の兄弟要素のみが数え上げの対象になる。

nth の指定方法

an + b の形で指定できる（b + an はダメ、n = 0,1,2,3…、a, bは整数）

2を指定すると2番目のみ
2nを指定すると偶数番目
evenを指定すると偶数番目（⇒ 2n と同じ）
oddを指定すると奇数番目（⇒ 2n + 1 または 2n - 1 と同じ）
3nを指定すると3の倍数番目
10n-1を指定すると、9、19, 29 .. 番目
n+2と指定すると2つ目の要素以降が対象（＝最初の要素を除外）
-n+4とすると最初の4つまでを指定（a = -1, b = 4）

nth-xxx では n に 0, 1, 2, 3, 4 … を代入して選択される要素を計算する

2 は 2, 2, 2, 2, 2 … なので、2番目のみが選択される（a = 0, b = 2、 0n + 2 と考える）
n は 0, 1, 2, 3, 4 … なので、全ての要素が選択される。
2n+1 は 1, 3, 5, 7, 9 … となるので、奇数が選択される。
-n+4 は 4, 3, 2, 1, 0, -1, -2 … となるので最初の4つが選択される（0番目やマイナス番目の要素は存在しない）
n+2 は 2, 3, 4, 5, 6 … となるので２つ目以降が選択される

of-typeとchild

いずれも兄弟要素の中の指定番目の要素を選択するもの

-of-typeは、自分と異なる兄弟要素を数えない。
-childは、自分と異なる兄弟要素も数える。

子要素がすべて同一の要素であれば、どちらを使っても同じである。

疑似要素セレクタ

E::first-line	E要素の１行目
E::first-letter	E要素の１文字目
E::after	E要素の後に生成された空間
E::before	E要素の前に生成された空間

CSS振り分け

メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN

外観モードによる振り分け

OSのダークモードへの対応（Firefox 67以降など、2019年3月現在対応ブラウザなし）

<!-- ライトモード、prefers-color-theme未対応の場合のCSS -->
<link rel="stylesheet" href="light.css">
<!-- ダークモードのCSS -->
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="dark.css">

iPhone用のview port設定（拡大縮小の禁止設定）

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

iPhone、iPad用にCSS振り分け

<!-- iPhone -->
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css">
 
<!-- iPhone Not Retina -->
<link rel="stylesheet" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1)" href="iphone3.css">
 
<!-- iPhone Retina -->
<link rel="stylesheet" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="iphone4.css">
 
<!-- iPad -->
<link rel="stylesheet" media="screen and (min-device-width: 481px) and (max-device-width: 1024px)" href="iPad.css">
 
<!-- iPad 縦表示 -->
<link rel="stylesheet" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="iPadPortrait.css">
 
<!-- iPad 横表示 -->
<link rel="stylesheet" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="iPadLandscape.css">
 
<!-- PC用 -->
<link rel="stylesheet" media="screen and (min-device-width: 1025px)" href="pc.css">

Cat Paw Software

目次

CSS