1. ウェブ
  2. CSS
  3. リファレンス
  4. セレクター
  5. 全称セレクター

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

全称セレクター

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

CSS の全称セレクター (universal selector) (*) は、すべての種類の要素に一致します。

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

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

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

メモ: 全称セレクター (*) は要素のみに一致します。 これ自体では擬似要素に直接一致しません。

例えば、ページ上のすべての ::before 擬似要素に一致させるには、*::before のようなセレクターを使用する必要があります。これは、* がすべての要素に一致し、::before 擬似要素がすべての要素で利用できるためうまくいきます。

構文

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;
}

仕様書

仕様書
Selectors Level 4
# the-universal-selector

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告