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

複数のセレクタに対してスタイルを設定する - CSS

スタイルシートで複数の要素に対してスタイルを設定するコードを紹介します。

概要

複数の要素にスタイルを設定する場合は","で要素を区切ります。

書式

(要素1), (要素2), (要素3), ... (要素n){
  (スタイル記述)
}

例

コード

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

MultiSelector.css

h1, h2, h3, h4 {
  font-size:18px;
  color:#0094ff;
}

解説

h1,h2,h3,h4のフォントサイズをすべて18pixelにし、文字色を#0094FFに設定します。

MultiSelector.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="MultiSelector.css" />
</head>
<body>
    <h1>これはH1タグです</h1>
    <h2>これはH2タグです</h2>
    <h3>これはH3タグです</h3>
    <h4>これはH4タグです</h4>
</body>
</html>

表示結果9

上記のHTMLファイルを表示すると下図のページが表示されます。h1,h2,h3,h4いずれも表示文字サイズが18pixelに、文字色が#0094FFで表示されています。

このページのキーワード

複数のセレクタに対してスタイルを指定する
複数のセレクタに対してスタイルを適用する

著者

とりっち

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

目次

複数のセレクタに対してスタイルを設定する - CSS

概要

書式

例

コード

解説

MultiSelector.html

表示結果9

関連するページ