タイプセレクタ
要素名を使った指定では、要素のタイプ別にスタイルを適用させることができます。
p { color: red; }
例えば、上記のようにp要素に対してスタイルを設定しておくと、文書内の全てのp要素にこのスタイルが適用されることになります。
- p要素以外にも、様々な要素に対してスタイルを設定することができます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
h1 { color: red; } /* 文字色を赤に指定 */
h2 { color: blue; } /* 文字色を青に指定 */
h3 { color: green; } /* 文字色を緑に指定 */
p { font-size: 80%; } /* 文字サイズを80%に指定 */
</style>
</head>
<body>
<h1>この見出しの文字色は赤です</h1>
<p>この段落の文字サイズは80%です</p>
<h2>この見出しの文字色は青です</h2>
<p>この段落の文字サイズは80%です</p>
<h3>この見出しの文字色は緑です</h3>
<p>この段落の文字サイズは80%です</p>
</body>
</html>
全称セレクタ
要素名の代わりにアスタリスク（ * ）を指定すると、文書内の全ての要素にそのスタイルが適用されます。
* { margin: 0; padding: 0; }
次の例では、文書内にある全ての要素のマージンが0になります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
* { margin: 0; }
</style>
</head>
<body>
<h1>この見出しのマージンは0です</h1>
<p>この段落のマージンは0です</p>
<h2>この見出しのマージンは0です</h2>
<p>この段落のマージンは0です</p>
<h3>この見出しのマージンは0です</h3>
<p>この段落のマージンは0です</p>
</body>
</html>
子孫セレクタ
セレクタとセレクタを半角スペースで区切って記述すると、特定の範囲内にある要素にのみスタイルを適用させることができます。
div p { color: red; }
次の例では、div要素内のp要素に対してのみ、color: red が適用されることになります。それ以外のp要素には、このスタイルは適用されません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
div p { color: red; }
</style>
</head>
<body>
<div>
<p>このテキストにスタイルが適用されます</p>
</div>
<p>このテキストには適用されません</p>
</body>
</html>