要素型セレクター

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CSS の要素型セレクター (type selector) は、ノード名で要素を一致させます。つまり、文書内にある指定された型の要素をすべて選択します。

css
/* すべての <a> 要素。 */
a {
  color: red;
}

要素型セレクターは @namespace を使用して名前空間を付けることができます。これは、複数の名前空間を含む文書、例えば HTML5 とインライン SVG または MathML、または複数の語彙が混在した XML などを扱うのに有用です。

  • ns|h1 - 名前空間 ns の中で <h1> 要素に一致します
  • *|h1 - <h1> 要素に一致します
  • |h1 - 名前空間が宣言されていない <h1> 要素に一致します

構文

css
要素名 { スタイルプロパティ }

例

CSS

css
span {
  background-color: skyblue;
}

HTML

html
<span>テキストを持つ span です。</span>
<p>テキストを持つ p です。</p>
<span>追加のテキストを持つ span です。</span>

結果

名前空間

この例では、セレクターは example 名前空間内の <h1> 要素にのみ一致します。

css
@namespace example url(http://www.example.com);
example|h1 {
  color: blue;
}

仕様書

Specification
Selectors Level 4
# type-selectors

ブラウザーの互換性

BCD tables only load in the browser

関連情報