CSSセレクタはスタイルの適用対象を指定するコードです。
ここではCSSセレクタ基本的な使い方を紹介していきます。
* (すべての要素)
|
1 |
* {color:blue;} |
(*)は全ての要素に対してスタイルを適用することができます。
p (要素名)
|
1 |
p {color:blue;} |
要素名により指定した要素に対してスタイルを適用することができます。
上記例のようにpのスタイルを決定した場合pにのみ適用されます。
|
1 2 |
<h2>この部分は表示される際、変わりません</h2> <p>この部分が表示される際、指定したスタイルである青色になります</p> |
.sample (クラス名の要素)
|
1 |
.sample {color:blue;} |
クラス名により指定した要素に対してスタイルを適用することができます。クラス名は１つの文書内で重複して指定が可能なので異なる要素に対して同じスタイルの指定ができるようになります。
|
1 2 3 |
<h2>この部分は表示される際、変わりません</h2> <p>この部分は表示される際、変わりません</p> <p class="sample">この部分が表示される際、指定したスタイルである青色になります</p> |
#id (id名の要素)
|
1 |
#sample {font-size:16px;} |
id名により指定した要素に対してスタイルを適用することができます。
idはクラスと違い１つの文書内で重複して同じid名を使用することができません。
|
1 2 3 4 |
<div id="sample"> <h2>この部分が表示される際sampleで指定した16pxになります</h2> </div> <p>この部分は16pxになりません</p> |
h2, p (複数)
|
1 |
h2,p {color:blue;} |
セレクトを(,)で区切ること複数のセレクタに対して同じスタイルの適用が可能となります。
|
1 2 |
<h2>この部分が表示される際、指定したスタイルである青色になります</h2> <p>この部分が表示される際、指定したスタイルである青色になります</p> |
