★セレクタの設定方法

 戻る セレクタの設定方法 進む

ここでは、セレクタの設定方法をまとめています。ご参考になれば幸いです。
セレクタの設定方法は、以下の７通りがあります。

さて、どれを使うべきなのか？
同時に２つ以上の方法で記述することもできるので、目的に応じて使い分ければ良いと思います。



複数のエレメント（タグ）に同じスタイルをまとめて設定する。

エレメント（タグ）を , （カンマ）で区切って指定します。

ソース
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- あ -->
<link rev="made" href="mailto:pokochant@eastmail.com">
<title lang="ja">文書タイトル</title>
<style type="text/css">
<!--
h4,h5,h6{background-color:lime;
             color:green;}            /*h4,h5,h6のスタイルを統一。*/
-->
</style>
</head>
<body>

<h4>第４見出しも</h4>
<h5>第５見出しも</h5>
<h6>第６見出しも同じスタイルです。</h6>

<address>作者名やメールアドレス</address>
</body>
</html>

表示例

第４見出しも

第５見出しも
第６見出しも同じスタイルです。

対応状況

複数のエレメント（タグ）に同じスタイルをまとめて設定する。 L1 L2 N4 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3

E3

 E4 E5 ME5 E55 E6

スタイルシート対応ブラウザであれば、OKです。安心して使いましょう。



エレメント（タグ）の相関関係によりスタイルを設定する。

親エレメントに含まれる子エレメントに対してスタイルを設定します。エレメント（タグ）をスペースで区切って指定します。 , （カンマ）ではありません

ソース
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- あ -->
<link rev="made" href="mailto:pokochant@eastmail.com">
<title lang="ja">文書タイトル</title>
<style type="text/css">
<!--
p strong {background-color:lime;
             color:green;}            /*p内のstrongのみのスタイル。*/
-->
</style>
</head>
<body>

<p>p内の<strong>strong</strong>のみに設定してます。</p>
<div>p以外の<strong>strong</strong>は設定されません。</div>


<address>作者名やメールアドレス</address>
</body>
</html>

表示例

p内のstrongのみに設定してます。

p以外のstrongは設定されません。

対応状況

エレメント（タグ）の相関関係によりスタイルを設定する。 L1 L2 N4 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3

E3

 E4 E5 ME5 E55 E6

スタイルシート対応ブラウザであれば、OKです。安心して使いましょう。

ネストも出来ます。

もちろん、テーブル・エレメント、リスト・エレメントのようなネスト可能な場合です。
例えば、olでネストすると、

ソース
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- あ -->
<link rev="made" href="mailto:pokochant@eastmail.com">
<title lang="ja">文書タイトル</title>
<style type="text/css">
<!--
ol li{color:blue;}
ol ol li{color:red;}
-->
</style>
</head>
<body>

<ol>
<li>ここは青色<ol><li>ここは赤色</li><li>ここも赤色</li></ol></li>
<li>ここも青色</li>
</ol>


<address>作者名やメールアドレス</address>
</body>
</html>

表示例
  1. ここは青色
    1. ここは赤色
    2. ここも赤色
  2. ここも青色


class（クラス）によりスタイルを設定する。

classはエレメントごとに意味を分けることが出来ます。例えば、異なるスタイルを持ったdivを複数作成出来ます。
. （ピリオド）に続けてclass名を指定します。
また、エレメント（タグ）に付ける形と付けない形があります。付ける形の場合は、設定したエレメント（タグ）しかclassを呼び出せません。付けない形の場合はどのエレメント（タグ）でもclassを呼び出せます。

エレメント（タグ） . class名{ 属性 : 値 ; }
. class名{ 属性 : 値 ; }
ソース
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- あ -->
<link rev="made" href="mailto:pokochant@eastmail.com">
<title lang="ja">文書タイトル</title>
<style type="text/css">
<!--
p.blue{color:blue;}
.red{color:red;}
-->
</style>
</head>
<body>

<p class="blue">class名blueを呼び出しています。</p>
<div class="blue">divではclass名blueを呼び出せません。</div>
<div class="red">class名redは、どのエレメント（タグ）でも呼び出せます。</div>

<address>作者名やメールアドレス</address>
</body>
</html>

表示例

class名blueを呼び出しています。

divではclass名blueを呼び出せません。
class名redは、どのエレメント（タグ）でも呼び出せます。

対応状況

エレメント（タグ）に付ける形 L1 L2 N4 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3

E3

 E4 E5 ME5 E55 E6
エレメント（タグ）に付けない形 L1 L2 N4 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3 E3 E4 E5 ME5 E55 E6

スタイルシート対応ブラウザであれば、OKです。安心して使いましょう。



idによりスタイルを設定する。

idはエレメントごとに意味を分けることが出来ます。例えば、classと同じように異なるスタイルを持ったdivを複数作成出来ますが、W3Cではidはユニークでなければならないとうたっています（１つのHTML内で１度しか呼び出すことが出来ない）。ところが、現状のブラウザでは複数回呼び出せます。
# （シャープ）に続けてid名を指定します。
また、エレメント（タグ）に付ける形と付けない形があります。付ける形の場合は、設定したエレメント（タグ）しかidを呼び出せません。付けない形の場合はどのエレメント（タグ）でもidを呼び出せます。

エレメント（タグ） # id名{ 属性 : 値 ; }
# id名{ 属性 : 値 ; }
ソース
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- あ -->
<link rev="made" href="mailto:pokochant@eastmail.com">
<title lang="ja">文書タイトル</title>
<style type="text/css">
<!--
p#green{color:green;}
#purple{color:purple;}
-->
</style>
</head>
<body>

<p id="green">id名greenを呼び出しています。</p>
<div id="green">divではid名greenを呼び出せません。</div>
<div id="purple">id名purpleは、どのエレメント（タグ）でも呼び出せます。</div>
<p id="purple">Internet ExplorerとNetscape Navigatorは複数回呼び出せます。</p>

<address>作者名やメールアドレス</address>
</body>
</html>

表示例

id名greenを呼び出しています。

divではid名greenを呼び出せません。
id名purpleは、どのエレメント（タグ）でも呼び出せます。

Internet ExplorerとNetscape Navigatorは複数回呼び出せます。

対応状況

エレメント（タグ）に付ける形 L1 L2 　 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3 E3 E4 E5 ME5 E55 E6
エレメント（タグ）に付けない形 L1 L2 N4 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3 E3 E4 E5 ME5 E55 E6

N4は、エレメント（タグ）に付ける形の場合に動作しません。注意して使いましょう。



擬似クラス（定義済みクラス）によりスタイルを設定する。

擬似クラスはエレメントに対して付けるものです。現在のブラウザが対応しているものはaエレメントに内在するものです。これによりaエレメントの表示属性を変更できます（bodyエレメントの属性と同じ事が出来ます）。 : （コロン）を付けて指定します。以下の４種類があります。

link
未参照のもの（例、ハイパーリンク文字の色を指定する。）
visited
既参照のもの（例、訪問済ハイパーリンク文字の色を指定する。）
active
アクティブな時（例、読み込み中ハイパーリンク文字の色を指定する。）
hover
マウスカーソルが重なった時

この他にも、現在のブラウザが未対応のものに以下があります。

forcus
フォーカスを得た時
lang( )
特定の言語
first-child
子要素の最初に出現するもの
before
エレメントの直前
after
エレメントの直後
エレメント（タグ） : 擬似クラス名{ 属性 : 値 ; }
ソース 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- あ -->
<link rev="made" href="mailto:pokochant@eastmail.com">
<title lang="ja">文書タイトル</title>
<style type="text/css">
<!--
a:link {color:#0080FF;}  /*リンクスポット(LINK)*/
a:visited {color:#8000FF;}  /*訪問済みリンク(VLINK)*/
a:active {color:#FE8C01;}  /*アクティブなスポット(ALINK)*/
a:hover {color:red;}
-->
</style>
</head>
<body>

<p><a href="#pagetop">ハイパーリンク文字</a><br>
上のリンク文字にマウスカーソルを合わせると文字色が赤色になります。<br>
クリックするとFE8C01色になります。<br>
参照後は8000FF色になります。</p>

<address>作者名やメールアドレス</address>
</body>
</html>

表示例

ハイパーリンク文字
上のリンク文字にマウスカーソルを合わせると文字色が赤色になります。
クリックするとFE8C01色になります。
参照後は8000FF色になります。

HTMLのbodyエレメントの各属性はスタイルシートで指定するように推奨されてます。擬似クラスで書き直したサンプルはこちら。

対応状況

link L1 L2 N4 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3 E3 E4 E5 ME5 E55 E6
visited L1 L2 N4 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3 　 E4 E5 ME5 E55 E6
active L1 L2 　 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3 　 E4 E5 ME5 E55 E6
hover 　 L2 　 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3 　 E4 E5 ME5 E55 E6

N4 はactiveとhoverが未対応ですので、注意して使いましょう。



クラス及び状況依存セレクタと併用した擬似クラスによりスタイルを設定する。

クラスと併用する場合、aエレメント . クラス名 : 擬似クラス名の順に記述する。
状況依存セレクタと併用する場合、aエレメント : 擬似クラス名 エレメント（タグ）の順に記述する。

ソース
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<!-- あ -->
<link rev="made" href="mailto:pokochant@eastmail.com">
<title lang="ja">文書タイトル</title>
<style type="text/css">
<!--
a.green:visited {color:green;}  /*クラス名greenの訪問済みリンク(VLINK)*/
a:hover i {color:red;
    background:aqua;} /*aエレメント内におけるiエレメントのhoverスタイル*/
-->
</style>
</head>
<body>

<p><a href="#pagetop" class="green">クラス名greenのリンク文字</a><br>
上のリンク文字は、参照後には緑色になります。</p>
<p><a href="#pagetop"><i>iエレメントのリンク文字</i></a><br>
上のリンク文字にマウスカーソルを合わせると、<br>
文字色が赤色になり背景色がアクア色になります。</p>

<address>作者名やメールアドレス</address>
</body>
</html>

表示例

クラス名greenのリンク文字
上のリンク文字は、参照後には緑色になります。

iエレメントのリンク文字
上のリンク文字にマウスカーソルを合わせると、
文字色が赤色になり背景色がアクア色になります。



擬似エレメントによりスタイルを設定する。

擬似エレメントもエレメントに対して付けるものです。現在のブラウザは対応していません。以下の最新ブラウザは対応しました。
first-line（１行目のスタイルを指定します。）とfirst-letter（１文字目のスタイルを指定します。）があります。ブロックレベルエレメントにのみ適用できます。

first-line L1 L2 　 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3 　 　 　 ME5 E55 E6
first-letter L1 L2 　 N6 N7 O6 O7 ff1 NA1 GA1 MO1 K2 K3 　 　 　 ME5 E55 E6


[先頭へ] [Top Pageへ] [Contentsへ]

Copyright (C) pokochan 2000-2005
http://www.tees.ne.jp/~pokochan/style/setup.html
E-mailpokochan@mx1.tees.ne.jp