iPentec.com / Articles / CSS / CSSセレクター

CSSセレクター

指定したクラスが設定されている特定のHTMLタグのスタイルを設定する

指定した特定のクラスが設定されているHTMLタグのスタイルを設定するコードを紹介します。

概要

特定のHTMLタグでクラスが設定されているタグに対して画面表示時のスタイルを設定したい場合があります。この記事では、HTMLタグで指定したクラスの場合にスタイルを設定するCSSの記述方法を紹介します。

Tips

特定のIDが設定されているHTMLタグにスタイルを設定する方法はこちらの記事を参照してください。

書式

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

例

コード

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

ContiguousSelector.css

h1.MyClass01 {
  color:#A0A0FF;
}

p.MyClass01 {
  color:#C00000;
}

ContiguousSelector.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="TagAndClassSelector.css" />
</head>
<body>
    <h1 class="MyClass01">見出しH1 123</h1>
    <h2 class="MyClass01">見出しH2 123</h2>
    <h3 class="MyClass01">見出しH3 123</h3>
    <p class="MyClass01">段落ABCDEFG</p>
</body>
</html>

解説

"h1.MyClass01"の記述によりH1タグでクラス名が"MyClass01"である要素のスタイルを設定します。上記の場合は文字色を"#A0A0FF"(水色)に設定します。また、"p.MyClass01"の記述により"p"タグでクラス名が"MyClass01"の要素のスタイルを設定します。上記のコードでは文字色を暗い赤に設定します。

表示結果

上記のHTMLファイルをWebブラウザで表示すると下図の画面となります。
H1,H2,H3,PタグともにMyClass01のクラスですが、H1タグの文字色が水色に、Pタグの文字色が暗い赤で表示されています。

このページのキーワード

指定したクラスが設定されている特定のHTMLタグのスタイルを指定する
指定したクラスが設定されている特定のHTMLタグのスタイルを適用する

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

掲載日: 2013-01-22

目次

CSSセレクター

指定したクラスが設定されている特定のHTMLタグのスタイルを設定する

概要

書式

例

コード

解説

表示結果

関連するページ