CSS基本チュートリアル

CSSボックスモデル

CSS3基本チュートリアル

CSSリファレンスマニュアル

CSS @ルール(RULES)

CSS Pseudo-elements(擬似要素)CSS アライメント(元素对齐)

CSS Pseudo-classes(仮クラス )

CSSの仮クラス選択子は、ドキュメントツリーによって定義されない他の条件に基づいてコンポーネントをマッチングします。CSSの仮クラスは、選択子に追加されるキーワードで、選択する要素の特殊な状態を指定します。例えば、:hoverは、ユーザーがボタンにマウスを乗せたときにボタンの色を変更するために使用できます。

仮クラスとは何ですか

CSSの仮クラスは、要素の動的な状態のスタイルを設定することができ、例えば、ホバー、アクティブ状態、フォーカス状態、およびドキュメントツリーに存在するが他の選択子を使用してターゲットとすることができない要素（例えば、最初のまたは最後の子要素）に対して、IDやクラスを選択子として追加することなく設定することができます。

パーシャルクラスはコロン（:）で始まる。以下の方法でその文法を提供できます：

選択子：パーシャルクラス{ 属性：値 ; }

以下の部分では、最も一般的なパーシャルクラスを説明します。

アンカーパーシャルクラス

を使用してアンカーパーシャルクラスリンクは、異なる方法で表示できます：

これらのパーシャルクラスは、未訪問のリンクをスタイル化し、訪問したリンクをスタイル化します。最も一般的なスタイル設定技術は、訪問したリンクから下線を削除することです。

例

a:link　{
　　　　color:　blue;
}
a:visited　{
　　　　text-decoration:　none;
}

テストしてみる‹/›

一部のアンカーパーシャルクラスは動的です-これらは、ユーザーがドキュメントと対話（例えば、ホバーまたはフォーカスなど）した際に適用されます。

例

a:hover　{
　　　　color:　red;
}
a:active　{
　　　　color:　gray;
}
a:focus　{
　　　　color:　yellow;
}

テストしてみる‹/›

これらのパーシャルクラスは、ユーザーの操作に対するリンクの表示方法を変更します。

:hover ユーザーが要素にカーソルを置き、選択しない場合に適用されます。
:active 要素がアクティブまたはクリックされた場合に適用されます。
:focus キーボード焦点を持つ要素に適用されます。

注：これらのパーシャルクラスが正しく動作するためには、正しい順序で定義する必要があります。- :link, :visited, :hover, :active, :focuss

:first-child擬似クラス

:first-childパーシャルクラスは、他の要素の最初の子要素の要素に一致します。ol li:first-childの以下の例では、選択子が順序リストの最初のリストアイテムを選択し、その上部の端框を削除します。

例

ol　li:first-child　{
　　　　border-top:　none;
}

テストしてみる‹/›

注意：要:first-childがInternet Explorer 8および以前のバージョンで動作します。ドキュメントのトップにaを宣言する必要があります。

：last-seudoパーシャルクラス

:last-childパーシャルクラスは、他の要素の最後の子要素の要素に一致します。以下のul li:last-child例では、無序列表から最後のリストアイテムを選択し、その右端框を削除します。

例

ul　li:last-child　{
　　　　border-right:　none;
}

テストしてみる‹/›

注意： CSS :last-child選択子がInternet Explorer 8以前のバージョンでは動作しません。Internet Explorer 9およびそれ以降のバージョンでサポートされています。

：nth-child擬似クラス

CSS3新しい:nth-child擬似クラスは、親要素の1つまたは複数の特定の子オブジェクトをターゲットとして指定できるようにします。この選択の基本的な構文は:nthと-child(N)、Nはパラメータで、数字またはキーワード（evenやodd）または形式のxn+y、xとyは整数です（例えば1n、2n、2n+1、...）。

例

table tr:nth-child(2n) td {
　　　　background: #eee;
}

テストしてみる‹/›

上記の例のスタイルルールは、テーブル行をハイライトするだけで、要素にIDやクラスを追加することはありません。

ヒント： CSS :nth-child(N)選択子は、特定の間隔やパターン（例えば、偶数や奇数の位置など）でドキュメントツリー内に出现する要素を選択する場合に非常に役立ちます。

：lang擬似クラス

言語擬似クラス:langは、特定のタグの言語設定に基づいて選択子を構築することを許可します。以下の例では、:lang擬似クラス言語値を明確に割り当てるための要素に対して、言語noの引用符が定義されています。

例

q:lang(no) {
　　　　quotes: "~" "~";
}
/*　HTML コードスニペット　*/Some text A quote in a paragraph Some text.

テストしてみる‹/›

注意： Internet Explorer 7以前のバージョンでは:lang擬似クラスがサポートされていません:langIE8たとえば、a指定のときにサポートされています。

擬似クラスとCSSクラス

擬似クラスはCSSクラスと組み合わせて使用できます。

以下の例では、class="red"を持つリンクが赤色で表示されます。

例

a.red:link {　　　　/*　style ルール　*/
　　　　color: #ff0000;
}
<a class="red" href="#">クリックして</a>　　　　/*　HTML コードスニペット　*/

テストしてみる‹/›

CSS Pseudo-elements(擬似要素)CSS アライメント(元素对齐)