COE documents

セレクタのグループ化

セレクタをグループ化し，CSSの記述を簡潔にする．

セレクタ1, セレクタ2, セレクタ3 { プロパティ: 値; }

クラスセレクタ

クラスセレクタとは要素名とクラス名をピリオドでつなげたものであり，そのクラス名をもつ要素にのみ特定のスタイルを指定できる．

• 要素名を限定

  CSSのテンプレート	要素名.クラス名 { プロパティ: 値; }
  XHTMLのテンプレート	<要素名 class="クラス名"> </要素名>

  指定した要素名やクラス名以外のものを組み合わせてもCSSの効果は反映されない．

• 要素名を省略

  テンプレート	.クラス名 { プロパティ: 値; }
  XHTMLのテンプレート	<要素名 class="クラス名"> </要素名>

  指定したクラス名を用いればすべての要素名にCSSの効果が反映反映される．

• 複数のクラス

  CSSのテンプレート	要素名α.クラス名β { プロパティ: 値; } 要素名α.クラス名γ { プロパティ: 値; }
  XHTMLのテンプレート	<要素名α class="クラス名β クラス名γ"> </要素名α>

IDセレクタ

IDセレクタとは要素名とID名をシャープ(#)でつなげたもので，そのID名をもつ要素にのみ特定のスタイルを指定できる．

要素名#ID名 { プロパティ: 値; }

<要素名 id="クラス名"> </要素名> 

子孫セレクタ

子孫セレクタとは，2つの要素名を半角の空白で区切ったものである．1つ目の要素名を親要素・2つ目の要素名を子要素と呼び，子要素にCSSの効果が反映される．親要素に指定した要素の中に，子要素として指定した要素があるときのみ，その子要素のデザインを変更できる．

親要素 子要素 { プロパティ: 値; }

<親要素> 
<子要素>テキスト</子要素> 
</親要素> 

その他のセレクタ

• 子供セレクタ
• 隣接セレクタ
• 属性セレクタ
• 全称セレクタ

link擬似クラス

未訪問時のリンクのデザインを指定できる．

a:link { プロパティ: 値; }

<a href="URL">テキスト</a>

visited擬似クラス

訪問済みのリンクのデザインを指定できる．

a:vidited { プロパティ: 値; }

<a href="URL">テキスト</a>

hover擬似クラス

指定した要素にマウスポインタを合わせた時のスタイルを指定できる．

要素名:hover { プロパティ: 値; }

active擬似クラス

マウスのボタンが押されたときのように，要素がアクティブになったとき時のスタイルを指定できる．

要素名:acitive { プロパティ: 値; }

その他の擬似クラス

• focus擬似クラス
• first-child擬似クラス
• lang擬似クラス

擬似要素

• first-letter擬似要素
• first-line擬似要素
• before擬似要素
• after擬似要素

@importルール

CSSファイルの中に外部のCSSファイルを取り込むときに用いる．

@import url(URL);

@charsetルール

CSSファイルで使われる文字コードを指定する．

@charset "文字コード";

@mediaルール

特定のメディアごとにCSSを反映されられる．

@media メディアの種類{セレクタ};

その他のアットルール

• @font-faceルール
• @pageルール