差分

このページの2つのバージョン間の差分を表示します。

--- css [2011/10/12 11:17] – [セレクタ] nullpon
+++ css [2019/03/18 04:24] (現在) – [外観モードによる振り分け] nullpon
@@ 行 3: / 行 3: @@
   * [[http://www.w3.org/TR/css3-selectors/#selectors|Selectors Level 3]]
-セレクタのタイプ
+==== セレクタのタイプ ====
 |*|全て|
 |E|要素セレクタ|
@@ 行 17: / 行 18: @@
 |E:not(s)|否定疑似クラスセレクタ、sで指定したセレクタに該当しないE|
-属性セレクタ
+==== 属性セレクタ ====
 |E[attr]|attr属性を持つE要素|
@@ 行 27: / 行 28: @@
 |%%E[attr|="hoge"]%%|値をハイフン区切りし、そのうちどれかがhogeであるattr属性を持つE要素|
+==== 疑似クラスセレクタ ====
-疑似クラスセレクタ
+|E:root|ルート要素、HTML文書ではhtml要素のこと|
+|E:nth-of-type(n)|兄弟要素中のE要素でn番目のもの|
-|E:root|ルート要素|
+|E:nth-last-of-type(n)|兄弟要素中のE要素で後ろからn番目のもの|
-|E:nth-of-type(n)|n番目のE要素|
+|E:first-of-type|兄弟要素中のE要素で最初のもの ＝ E:nth-of-type(1)|
-|E:nth-of-last-type(n)|最後からn番目のE要素|
+|E:last-of-type|兄弟要素中のE要素で最後のもの ＝ E:nth-last-of-type(1)|
-|E:first-of-type|最初のE要素 ＝ E:nth-of-type(1)|
+|E:only-of-type|兄弟にE要素がひとつしかない場合、そのE要素|
-|E:last-of-type|最後のE要素 ＝ E:nth-of-last-type(1)|
+|E:nth-child(n)|兄弟の中でn番目にあるE要素|
-|E:only-of-type|一つしかないE要素 ＝ E:first-of-type:last-of-type|
+|E:nth-last-child(n)|兄弟の中で後ろからn番目にあるE要素|
-|E:nth-child(n)|n番目のEの子要素|
+|E:first-child|兄弟の中で最初の要素であるE|
-|E:nth-last-child(n)|後ろからn番目のEの子要素|
+|E:last-child|兄弟の中で最後の要素であるE|
-|E:first-child|Eの最初の子要素|
-|E:last-child|Eの最初の子要素|
 |E:only-child|兄弟要素のないE要素|
 |E:empty|子要素の無いE要素|
@@ 行 52: / 行 52: @@
 |E:disabled|無効|
 |E:checked|チェック|
-|E:indeterminate|チェック状態が不定、JavaScriptでindeterminateがtrueにされた場合|
+|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は整数）
-(n)の指定例
   * 2を指定すると2番目のみ
-  * oddを指定すると奇数番目
+  * 2nを指定すると偶数番目
-  * evenを指定すると偶数番目
+  * evenを指定すると偶数番目（=> 2n と同じ）
-  * 3nを指定すると3の倍数番目（2nはevenと同じ）
+  * oddを指定すると奇数番目（=> 2n + 1 または 2n - 1 と同じ）
+  * 3nを指定すると3の倍数番目
-of-typeとchild
+  * 10n-1を指定すると、9、19, 29 .. 番目
-  * -of-typeは自分と異なる兄弟要素を考慮しない
+  * n+2と指定すると2つ目の要素以降が対象（＝最初の要素を除外）
-  * -childは自分と異なる兄弟要素も考慮する
+  * -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要素の１行目|
@@ 行 72: / 行 92: @@
 |E::before|E要素の前に生成された空間|
+===== CSS振り分け =====
+[[https://developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/Using_media_queries|メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN]]
+==== 外観モードによる振り分け ====
+OSのダークモードへの対応（Firefox 67以降など、2019年3月現在対応ブラウザなし）
+<code html>
+<!-- ライトモード、prefers-color-theme未対応の場合のCSS -->
+<link rel="stylesheet" href="light.css">
+<!-- ダークモードのCSS -->
+<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="dark.css">
+</code>
+==== iPhone用のview port設定（拡大縮小の禁止設定） ====
-===== CSS振り分け =====
-iPhone用のview port設定（拡大縮小の禁止設定）
 <code html>
 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
 </code>
-iPhone、iPad用にCSS振り分け
+==== iPhone、iPad用にCSS振り分け ====
 <code html>
 <!-- iPhone -->
@@ 行 103: / 行 136: @@
 <!-- PC用 -->
 <link rel="stylesheet" media="screen and (min-device-width: 1025px)" href="pc.css">
 </code>