| ■ すべての要素に指定 |
| * { プロパティ : 値 ; } |
| セレクタにアスタリスク ( * )を指定すると、すべての要素にスタイルが適用されます。 |
 ソース head要素内 |
|
* { font-size : 12px ; color : red ; }
|
| ソース body要素内 |
<strong>VALUE NEXT</strong>
<div>いまさらHTML,CSS講座</div>
|
|
 表 示 |
|
|
|
| ■ 特定の要素内のすべての要素に指定 |
| 要素 * { プロパティ : 値 ; } |
| 要素に半角スペースで区切り、アスタリスク ( * )を指定すると、セレクタに指定した要素内すべての要素にスタイルが適用されます。 |
| 下記の例では、div要素内すべての要素に、フォントサイズ：12px、赤色文字が指定されたことになります。 |
| ソース head要素内 |
|
div * { font-size : 12px ; color : red ; }
|
| ソース body要素内 |
| <div><em>いまさら</em>HTML,<strong>CSS</strong>講座</div>
|
|
| 表 示 |
|
|
|
| ■ id を指定 |
#id名 { プロパティ : 値 ; }
要素#id名 { プロパティ : 値 ; } |
| シャープ( # )に続けて、任意のid名つけセレクタを指定すると、id="任意のid名" と指定した要素にスタイルが適用されます。 |
| シャープ( # )の前に要素を指定した場合は、指定した要素以外の要素に、id="任意のid名" を指定してもスタイルが適用されません。 |
| また、1つのHTML文書内において、同じ id名 を 2つ 以上指定することはできません。 |
| ソース head要素内 |
#header { width : 200px ; height : 30px ; background : tan ; }
#main { width : 200px ; height : 60px ; background : AntiqueWhite ; }
#footer { width : 200px ; height : 10px ; background : tan ; }
|
| ソース body要素内 |
<body>
<div id="header">id名は、header</div>
<div id="main"<id名は、main</div>
<div id="footer">id名は、footer</div>
</body>
|
|
| 表 示 |
|
|
|
| ■ class を指定 |
.class名 { プロパティ : 値 ; }
要素.class名 { プロパティ : 値 ; } |
| ピリオド( . )に続けて、任意のclass名つけセレクタを指定すると、class="任意のclass名" と指定した要素にスタイルが適用されます。 |
| ピリオド( . )の前に要素を指定した場合は、指定した要素以外の要素に、class="任意のclass名" を指定してもスタイルが適用されません。 |
| idを指定する場合とは異なり、HTML文書内で何度でも指定することができますので、要素を限定しないスタイルの指定や、スタイルをグループ分けする際に有効です。 |
| ソース head要素内 |
|
.fontstyle { font : bold 12px ; color : red ; }
|
| ソース body要素内 |
<body>
<div class="fontstyle">
フォントサイズ12px、太字、赤色
</div>
<blockquote class="fontstyle">
フォントサイズ12px、太字、赤色
</blockquote>
</body>
|
|
| 表 示 |
|
|
|
|
|
|
|
|
selector セレクタ
Internet Explorer 7 で対応、IE 6 は実装されていません。