セレクタ

記号	適用要素	備考
`*`	すべての要素
`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

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

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

アイコン一覧からクラス名をコピーし次のように書く：
```
<i class="fa fa-bars"></i>
```

サイズ変更

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

横幅を揃える

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