セレクタ

記号	適用要素	備考
*	すべての要素
div	div要素
div[class]	class属性を持つdiv要素
div[class="foo"]	値がfooだけのclass属性を持つdiv要素	値はfooのみ
div[class-="foo"]	値にfooが1つでもあるclass属性を持つdiv要素	いくつでも可
a:link	未訪問のリンクのアンカーであるa要素
a:visited	訪問済みのリンクのアンカーであるa要素
a:hover	a要素にカーソルを合わせたとき
a:active	a要素のクリック時	クリックしている間適用
input:focus	Tabなどでのフォーカス時	テキストボックスなど
input:checked	チェックボックス・ラジオボタンのチェック時	チェックされている時適用
p::first-line	p要素の最初の1行
p::first-letter	p要素の最初の1文字
p:nth-child(n)	親要素のn番目の要素がpならばそれに適用	それ以外の要素なら何も起こらない
p:first-child	親要素の最初の要素がpならばそれに適用
p:nth-last-child(n)	親要素の最後からn番目の要素がpならばそれに適用
p:last-child	親要素の最後の要素がpならばそれに適用
p:nth-of-type(n)	親要素でn番目に現れるp
p:first-of-type	親要素で最初に現れるp
p:nth-last-of-type(n)	親要素の最後からn番目に現れるp
p:last-of-type	親要素の最後に現れるp
p::before	p要素の前に文字/画像を追加	文字：content: "テキスト"; 画像：content: url("img.png"); 追加した文字の書式も変更可能
p::after	p要素の後に文字/画像を追加
p::selection	テキストの選択時	Firefox：::-moz-selection
p:not(s)	セレクタsに一致しないp要素	sにはセレクタを書く
div p	子孫関係
div > p	子関係
img + p	同階層で直後
img ~ p	同階層でそれ以降
p, a	複数の要素

::のものは、旧ブラウザでは:しか対応していない。

プロパティ

アンチエイリアス（Safari）

-webkit-font-smoothing:

none	アンチエイリアスなし
antialiased	アンチエイリアス弱
subpixel-antialiased	アンチエイリアス強（デフォルト）

単位

vw, vh, vmin, vmax

width: 10vw;

vw	ビューポートの幅に対する割合
vh	ビューポートの高さに対する割合
vmin	ビューポートの幅と高さのうち、値が小さい方に対する割合
vmax	ビューポートの幅と高さのうち、値が大きい方に対する割合

※ビューポート：画面の幅や高さ

便利ツール

Font Awesome

1. HTMLに以下のコードを追加：

   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">

2. アイコン一覧からクラス名をコピーし次のように書く：

   <i class="fa fa-bars"></i>

サイズ変更

fa-lg	1.33倍
fa-2x	2倍
fa-3x	3倍
fa-4x	4倍
fa-5x	5倍

リスト

ulにfa-ul、liの中のiにfa-liを指定するとリストになる。

横幅を揃える

fa-fw

アイコンのの周りに線を付ける

fa-border

アイコンの右 / 左に文字を回り込み

pull-left / pull-right

回転

fa-rotate-90 / fa-rotate-180 / fa-rotate-270

常時回転

fa-spin

左右 / 上下反転

fa-flip-horizontal / fa-flip-vertical

アイコンを重ねる

<span class="fa-stack fa-lg">
    <i class="fa fa-camera fa-stack-1x"></i>
    <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>

詳細：Font Awesome - Example