このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

タイプ・セレクタ

記事Jul. 4th,2021
スタイルの適用対象を要素で選択するタイプ・セレクタ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

タイプ・セレクタ

タイプ・セレクタ(Type selector)”、もしくは“要素型セレクター”はスタイルを適用する対象を文書の記述言語の要素型を選択するためのセレクタです。HTMLでは要素/タグ名で選択します。

タイプ・セレクタは名前空間を示す任意の接頭辞を付加したCSS識別子であるCSS適合名として記述します。

[〚要素名〛] { ... }
<〚要素名〛 〚属性名〛="〚値〛">

要素名と値の英字の大文字と小文字が区別されるかどうかはスタイルが適用される文書が記述されている言語の定義に依ります。HTMLでは要素名の大文字と小文字は区別されません。

名前空間による選択

タイプ・セレクタはCSS適合名なので選択する要素を名前空間で絞り込むことができます。

CSS適合名は縦線(U+007C、“|”)を挟んだ定義済みの名前空間の接頭辞とローカル名(要素名や属性名)からなります。名前空間の接頭辞は@namespace”ルールによって定義されます。

特定の名前空間に属する特定の要素
〚名前空間〛|〚要素名〛 { ... }

どの名前空間にも属さない特定の要素
|〚要素名〛 { ... }

名前空間にかかわらず“〚要素名〛”という名前の要素
*|〚要素名〛 { ... }

既定の名前空間に属する特定の要素
〚要素名〛 { ... }

スタイルシートで@namespace”ルールによる名前空間の定義がされていない場合には接頭辞のないタイプ・セレクタは名前空間にかかわらず要素を選択します。

使用例

p {
background-color: #d6c6af; /**/
}

blockquote {
background-color: #be96d3; /**/
font-family: "游明朝","ヒラギノ明朝",serif;
font-style: italic;
}

cite {
font-style: italic;
font-weight: bold;
text-decoration: underline 2px dotted;
}

strong {
font-weight: bold;
text-decoration: underline 2px wavy;
}
<p>
平安時代の女流歌人である清少納言は<cite>『枕草子』</cite>の一節で下のように記しています。
</p>

<blockquote>
猫は、上のかぎり黒くて、ことはみな白き。
</blockquote>

<p>
つまり、<strong>背中だけ黒くてそれ以外は白い猫が良い</strong>のです。
</p>

平安時代の女流歌人である清少納言は『枕草子』の一節で下のように記しています。

猫は、上のかぎり黒くて、ことはみな白き。

つまり、背中だけ黒くてそれ以外は白い猫が良いのです。

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 勧告(REC) 作業草稿(WD)
“タイプ・セレクタ”
定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク