CSS3からの追加仕様①
（１）一般兄弟セレクタ
「要素A」よりも後ろに記載のある「要素B」に対して
スタイルを適用したい場合、要素名を「~」記号で繋げて記述する。
<p>対象外の段落</p>
<h3>小見出し</h3>
<p>対象の段落</p>
<p>対象の段落</p>このとき、CSSを
h3 ~ p { color: red; }とすると、「h3要素が登場した後に記述されているp要素だけ」を
適用対象にできる（文字色は赤色）。
（２）属性値が指定値の要素のみを適用対象にする
①指定値で始まる場合
『「A」という文字列から始まる値』が指定された「B属性」
を持つ、「C要素」に限定して適用対象可能。
C[B^="A"]（例）
a[href^="http://"] { color: red; }②指定値で終わる場合
『「A」という文字列で終わる値』が指定された「B属性」を持つ、
「C要素」に限定して適用対象可能。
C[B$="A"]（例）
a[href$=".pdf"] { color: red; }③指定値を含む場合
『「A」という文字列を含む値』が指定された「B属性」を持つ、
「C要素」に限定して適用対象可能。
C[B*="A"]（例）
a[href*="hello"] { color: red; }
（３）偶数／奇数項目の設定
「nth-child」（疑似クラス）を使うことで、簡単に装飾できる。
（HTML）
<ol>
<li>ここは1番目</li>
<li>ここは2番目</li>
<li>ここは3番目</li>
<li>ここは4番目</li>
</ol>（CSS)
li:nth-child(2n) {
/* 偶数だけ適用される */
color: red;
}
li:nth-child(2n+1) {
/* 奇数だけ適用される */
color: green;
}2nの「2」を他の数値に変更すれば、その倍数ごとのCSSが設定可能。
（４）角を丸くする
水平方向と垂直方向の２つの半径の組み合わせを記載する。
水平方向と垂直方向の各半径は、スラッシュ（ / ）で区切る。
水平方向と垂直方向の半径の値を、左上・右上・右下・左下
の順で指定する。
①border-radius
角丸をまとめて指定
（例）
border-radius: 100px 25px 50px 50px / 50px 25px 50px 25px;・スラッシュ以降を省略した場合は、水平垂直も同値として解釈される。
・値は長さかパーセンテージで指定。
・左下が省略された場合には、右上と同じ。
・右下が省略された場合には、左上と同じ。
・右上が省略された場合には、左上と同じ。
→つまり、左上のみ１ヶ所だけ値設定しても表記は角丸になる
②border-top-left-radius
左上の角丸
③border-top-right-radius
右上の角丸
④border-bottom-left-radius
左下の角丸
⑤border-bottom-right-radius
右下の角丸
（５）ボックスに影をつける
box-shadowでボックスに影をつけられる。
・２～４つの長さの値で定義する。
・任意で色、insetキーワードの指定可。
insetキーワードを付けると影がボックスの内側につく。
・長さ指定を省略すると「0」となる。
・色指定を省略すると「ユーザーエージェントが選んだ色」となる。
・複数の影を指定する場合は、カンマ（ , ）区切りで
影のリストを複数指定する。
（例）
p.sample1 {box-shadow: 10px 10px;}
p.sample2 {box-shadow: 10px 10px 10px rgba(0,0,0,0.4);}
p.sample3 {box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);}
p.sample4 {box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;}
p.sample1, p.sample2, p.sample3, p.sample4 {
width:300px; height:50px;
background-color:yellow;
border:solid 10px orange;
}※テキストに影をつける「text-shadow」プロパティも別途存在する。
（６）ボックスサイズの算出方法指定
box sizingでボックスサイズの算出方法を指定できる。
【設定できる値】
①content-box
パディングとボーダーを幅と高さに含めない（初期値）
②border-box
パディングとボーダーを幅と高さに含める
③inherit
親要素の値を継承する
（例）
.boxsizing {
width: 200px;
padding: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border:1px solid #333333;
}（７）最新の単位
Viewportについては、こちらに記載↓
【出典】