文書の過去の版を表示しています。

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	ルート要素
E:nth-of-type(n)	n番目のE要素
E:nth-of-last-type(n)	最後からn番目のE要素
E:first-of-type	最初のE要素＝ E:nth-of-type(1)
E:last-of-type	最後のE要素＝ E:nth-of-last-type(1)
E:only-of-type	一つしかないE要素＝ E:first-of-type:last-of-type
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	チェック状態が不定

(n)の指定例

2を指定すると2番目のみ
oddを指定すると奇数番目
evenを指定すると偶数番目
3nを指定すると3の倍数番目（2nはevenと同じ）

of-typeとchild

-of-typeは自分と異なる兄弟要素を考慮しない
-childは自分と異なる兄弟要素も考慮する

疑似要素セレクタ

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

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

セレクタ

CSS振り分け