全称セレクター

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 の全称セレクター (universal selector) (*) は、すべての種類の要素に一致します。

css
/* すべての要素を選択 */
* {
  color: green;
}

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

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

構文

css
* { スタイルプロパティ }

アスタリスクは単純セレクターを伴う場合に省略可能です。たとえば、 *.warning.warning は等価です。

CSS

css
* [lang^="en"] {
  color: green;
}

*.warning {
  color: red;
}

*#maincontent {
  border: 1px solid blue;
}

.floating {
  float: left;
}

/* 浮動要素の後の兄弟要素で自動的に浮動を解除する */
.floating + * {
  clear: left;
}

HTML

html
<p class="warning">
  <span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">A red span</span> in a green paragraph.
</p>

結果

名前空間

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

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

仕様書

Specification
Selectors Level 4
# the-universal-selector

ブラウザーの互換性

BCD tables only load in the browser

関連情報