CSS 要素選択子

CSS 要素選択子

最も一般的なCSSセレクタは要素セレクタです。言い換えれば、ドキュメントの要素が最も基本的なセレクタです。

HTMLのスタイルを設定する場合、セレクタは通常、p、h1、em、a、またはそれ自身のhtmlなどのHTML要素になります：

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

自分で試してみてください

あるスタイルをある要素から別の要素に切り替えることができます。

上記の段落テキスト（h1 要素ではなく）をグレーに設定する場合、h1 セレクタを p：に変更するだけで十分です。

html {color:black;}
p {color:gray;}
h2 {color:silver;}

自分で試してみてください

タイプセレクタ

W3C 標準では、要素セレクタはタイプセレクタ（タイプセレクタ）と呼ばれます。

「タイプセレクタはドキュメントの言語要素のタイプの名前をマッチします。タイプセレクタはドキュメントツリー内のその要素タイプの各インスタンスにマッチします。」

以下のルールはドキュメントツリー内のすべての h1 要素にマッチします：

h1 {font-family: sans-serif;}

したがって、私たちは XML 文档の要素にスタイルを設定することもできます：

XML 文档：

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="note.css"?>
<note>
<to>George</to>
<from>John</from>
<heading>リマインダー</heading>
<body>ミーティングを忘れないで！</body>
</note>

CSS ドキュメント：

note
  {
  font-family:Verdana, Arial;
  margin-left:30px;
  }
to
  {
  font-size:28px;
  display: block;
  }
from
  {
  font-size:28px;
  display: block;
  }
heading
  {
  color: red;
  font-size:60px;
  display: block;
  }
body
  {
  color: blue;
  font-size:35px;
  display: block;
  }

効果を確認

上記の例では、CSS 要素選択子（タイプ選択子）が XML ドキュメント内の要素のスタイルを設定できることがわかります。

XML ドキュメントにスタイルを追加する方法についてさらに詳しく知りたい場合は、CodeW3Cの XML チュートリアル。