特定のクラスの特定IDでのスタイルを指定する - CSS

特定のクラスの特定のIDのスタイルを指定するコードを紹介します。

書式

.(クラス名)#(ID名){
(スタイル記述)
}

例

下記のコードを記述します。

ClassAndIdSelector.css

.bluetext#main {
  color:#2020C0;
}

解説

bluetextクラスでかつIDが"main"出会った場合に限りスタイルを設定します。上記の例では、フォントカラーを"#2020C0"(暗い青)に設定します。

ClassAndIdSelector1.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 class="bluetext" id="main">段落 abcdefghijklmnopqrstuvwxyz</p>
    <p class="bluetext" >段落2 abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>

ClassAndIdSelector2.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>