いきなり本番用のソースコードで試すのではなく、まずは小さいコードで動作を確認してから本番用のソースコードに反映した方が作業がスムーズになることがあります。
本記事では簡易的にCSSの動作を確認するためのテンプレートを用意しました。
HTMLファイル
下記はhtmlファイルの内容です。ファイル名はなんでもかまいません。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="A B C qaz">
<p>test1</p>
</div>
<div class="D qaz">
<p>test2</p>
</div>
</body>
</html>
CSSファイル
下記はcssファイルの内容です。上記のHTMLファイルと同じフォルダーに配置してください。
ファイル名は”style.css”にしてください（または別のファイル名にする場合は、上記HTMLファイルの中の参照するCSSファイル名前を適宜修正してください）。
.D.qaz{
background-color: tomato;
}以上となります。参考になれば幸いです。
