特定のクラスの特定のIDのスタイルを指定するコードを紹介します。
下記のコードを記述します。
.bluetext#main {
color:#2020C0;
}
bluetextクラスでかつIDが"main"出会った場合に限りスタイルを設定します。上記の例では、フォントカラーを"#2020C0"(暗い青)に設定します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="ClassAndIdSelector.css" />
</head>
<body>
<h1>見出し12345</h1>
<p class="bluetext" id="main">段落 abcdefghijklmnopqrstuvwxyz</p>
<p class="bluetext" >段落2 abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="ClassAndIdSelector.css" />
</head>
<body>
<h1>見出し12345</h1>
<p id="main">段落 abcdefghijklmnopqrstuvwxyz</p>
<p>段落2 abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
上記のHTMLファイルを表示します。下図の画面が表示されます。"bluetext"クラスでIDが"main"の要素のみ文字色が暗い青色で表示されています。IDが"main"であってもクラス名が指定されていない、"bluetext"クラスでない場合はスタイルは反映されません。
