diff options
| -rw-r--r-- | files/ja/web/css/css_selectors/index.md | 220 |
1 files changed, 95 insertions, 125 deletions
diff --git a/files/ja/web/css/css_selectors/index.md b/files/ja/web/css/css_selectors/index.md index f1b00fa844..09bbeb6fc7 100644 --- a/files/ja/web/css/css_selectors/index.md +++ b/files/ja/web/css/css_selectors/index.md @@ -3,130 +3,100 @@ title: CSS セレクター slug: Web/CSS/CSS_Selectors tags: - CSS - - Guide - - Overview - - Reference - - Selectors + - ガイド + - 概要 + - リファレンス + - セレクター translation_of: Web/CSS/CSS_Selectors --- -<div>{{CSSRef("Selectors")}}</div> - -<p class="summary"><span class="seoSummary"><strong>CSS セレクター</strong>は、一連の CSS の規則が適用される要素を定義します。</span></p> - -<div class="blockIndicator note"> -<p><strong>メモ</strong>: 親のアイテム、親の兄弟、親の兄弟の子を選択するセレクターや結合子はありません。</p> -</div> - -<h2 id="Basic_selectors" name="Basic_selectors">基本セレクター</h2> - -<dl> - <dt><a href="/ja/docs/Web/CSS/Universal_selectors">全称セレクター</a></dt> - <dd>すべての要素を選択します。任意で、特定の名前空間に限定したり、すべての名前空間を対象にしたりすることができます。<br> - <strong>構文:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br> - <strong>例:</strong> <code>*</code> は文書のすべての要素を選択します。</dd> - <dt><a href="/ja/docs/Web/CSS/Type_selectors">要素型セレクター</a></dt> - <dd>指定されたノード名を持つすべての要素を選択します。<br> - <strong>構文:</strong> <code><var>elementname</var></code><br> - <strong>例:</strong> <code>input</code> はあらゆる {{HTMLElement("input")}} 要素を選択します。</dd> - <dt><a href="/ja/docs/Web/CSS/Class_selectors">クラスセレクター</a></dt> - <dd>指定された <code>class</code> 属性を持つすべての要素を選択します。<br> - <strong>構文:</strong> <code>.<var>classname</var></code><br> - <strong>例:</strong> <code>.index</code> は "index" クラスを持つあらゆる要素を選択します。</dd> - <dt><a href="/ja/docs/Web/CSS/ID_selectors">ID セレクター</a></dt> - <dd><code>id</code> 属性の値に基づいて要素を選択します。文書中に指定された ID を持つ要素は1つしかないはずです。<br> - <strong>構文:</strong> <code>#<var>idname</var></code><br> - <strong>例:</strong> <code>#toc</code> は "toc" という ID を持つ要素を選択します。</dd> - <dt><a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></dt> - <dd>指定された属性を持つ要素をすべて選択します。<br> - <strong>構文:</strong> <code>[<var>attr</var>]</code> <code>[<var>attr</var>=<var>value</var>]</code> <code>[<var>attr</var>~=<var>value</var>]</code> <code>[<var>attr</var>|=<var>value</var>]</code> <code>[<var>attr</var>^=<var>value</var>]</code> <code>[<var>attr</var>$=<var>value</var>]</code> <code>[<var>attr</var>*=<var>value</var>]</code><br> - <strong>例:</strong> <code>[autoplay]</code> は <code>autoplay</code> 属性が（どんな値でも）設定されているすべての要素を選択します。</dd> -</dl> - -<h2 id="グループ化セレクター">グループ化セレクター</h2> - -<dl> - <dt><a href="/ja/docs/Web/CSS/Selector_list">セレクターリスト</a></dt> - <dd><code>,</code> はグループ化の手段であり、一致するすべてのノードを選択します。<br> - <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var>, <var>B</var></code><br> - <strong>例:</strong> <code>div, span</code> は {{HTMLElement("span")}} と {{HTMLElement("div")}} の両要素に一致します。</dd> -</dl> - -<h2 id="Combinators" name="Combinators">結合子</h2> - -<dl> - <dt><a href="/ja/docs/Web/CSS/Descendant_combinator">子孫結合子</a></dt> - <dd><code> </code> (空白) 結合子は、第1の要素の子孫にあたるノードを選択します。<br> - <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var> <var>B</var></code><br> - <strong>例:</strong> <code>div span</code> は {{HTMLElement("div")}} 要素の中にある {{HTMLElement("span")}} 要素をすべて選択します。</dd> - <dt><a href="/ja/docs/Web/CSS/Child_combinator">子結合子</a></dt> - <dd><code>></code> 結合子は、第1の要素の直接の子に当たるノードを選択します。<br> - <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var> > <var>B</var></code><br> - <strong>例:</strong> <code>ul > li</code> は {{HTMLElement("ul")}} 要素の内側に直接ネストされた {{HTMLElement("li")}} 要素をすべて選択します。</dd> - <dt><a href="/ja/docs/Web/CSS/General_sibling_combinator">一般兄弟結合子</a></dt> - <dd><code>~</code> 結合子は兄弟を選択します。つまり、第2の要素が第1の要素の後にあり（ただし直後でなくても構わない）、両者が同じ親を持つ場合です。<br> - <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var> ~ <var>B</var></code><br> - <strong>例:</strong> <code>p ~ span</code> は {{HTMLElement("p")}} 要素の後にある {{HTMLElement("span")}} 要素をすべて選択します。</dd> - <dt><a href="/ja/docs/Web/CSS/Adjacent_sibling_combinator">隣接兄弟結合子</a></dt> - <dd><code>+</code> 結合子は隣接する兄弟を選択します。つまり、第2の要素が第1の要素の直後にあり、両者が同じ親を持つ場合です。<br> - <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var> + <var>B</var></code><br> - <strong>例:</strong> <code>h2 + p</code> は {{HTMLElement("h2")}} 要素の後にすぐに続く {{HTMLElement("p")}} 要素をすべて選択します。</dd> - <dt><a href="/ja/docs/Web/CSS/Column_combinator">列結合子</a> {{Experimental_Inline}}</dt> - <dd><code>||</code> 結合子は列に所属するノードを選択します。<br> - <strong>構文:</strong> <code style="white-space: nowrap;"><var>A</var> || <var>B</var></code><br> - <strong>例:</strong> <code>col || td</code> は {{HTMLElement("col")}} 要素のスコープに所属するすべての {{HTMLElement("td")}} 要素を選択します。</dd> -</dl> - -<h2 id="Pseudo" name="Pseudo">擬似表記</h2> - -<dl> - <dt><a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a></dt> - <dd><code>:</code> 表記により、文書ツリーの中に含まれない状態情報によって要素を選択することができます。<br> - <strong>例:</strong> <code>a:visited</code> はユーザーが訪問済みの {{HTMLElement("a")}} 要素をすべて選択します。</dd> - <dt><a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a></dt> - <dt><code>::</code> 表記は、 HTML に含まれていないエンティティを表現します。</dt> - <dd><strong>例:</strong> <code>p::first-line</code> はすべての {{HTMLElement("p")}} 要素の先頭行を選択します。</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Selectors")}}</td> - <td>{{Spec2("CSS4 Selectors")}}</td> - <td><code>||</code> 列結合子、グリッド構造セレクター、論理結合子、位置、時系列、リソース状態、言語、 UI の疑似クラス、属性値の選択における ASCII 文字の大文字小文字の区別の有無を示す修飾子を追加。</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Selectors")}}</td> - <td>{{Spec2("CSS3 Selectors")}}</td> - <td><code>~</code> 一般兄弟結合子、およびツリー構造の疑似クラスを追加。<br> - 疑似要素に二重コロン <code>::</code> の接頭辞を用いるようにした。追加の属性セレクター。</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "selector.html")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>子結合子 <code>></code> および隣接兄弟結合子 <code>+</code> を追加。<br> - <strong>全称セレクター</strong>と<strong>属性セレクター</strong>を追加。</td> - </tr> - <tr> - <td>{{SpecName("CSS1")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p><a href="/ja/docs/Web/CSS/Pseudo-classes#Specifications">疑似クラス</a>および<a href="/ja/docs/Web/CSS/Pseudo-elements#Specifications">疑似要素</a>の詳細は、それぞれの仕様書一覧表をご覧ください。</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/Specificity">CSS 詳細度</a></li> -</ul> +{{CSSRef("Selectors")}} + +**CSS セレクター**は、一連の CSS のルールが適用される要素を定義します。 + +> **Note:** 親のアイテム、親の兄弟、親の兄弟の子を選択するセレクターや結合子はありません。 + +## 基本セレクター + +- [全称セレクター](/ja/docs/Web/CSS/Universal_selectors) + - : すべての要素を選択します。任意で、特定の名前空間に限定したり、すべての名前空間を対象にしたりすることができます。 + **構文:** `*` `ns|*` `*|*` + **例:** `*` は文書のすべての要素を選択します。 + +- [要素型セレクター](/ja/docs/Web/CSS/Type_selectors) + - : 指定されたノード名を持つすべての要素を選択します。 + **構文:** `elementname` + **例:** `input` はあらゆる {{HTMLElement("input")}} 要素を選択します。 + +- [クラスセレクター](/ja/docs/Web/CSS/Class_selectors) + - : 指定された `class` 属性を持つすべての要素を選択します。 + **構文:** `.classname` + **例:** `.index` は "index" クラスを持つあらゆる要素を選択します。 + +- [ID セレクター](/ja/docs/Web/CSS/ID_selectors) + - : `id` 属性の値に基づいて要素を選択します。文書中に指定された ID を持つ要素は 1 つしかないはずです。 + **構文:** `#idname` + **例:** `#toc` は "toc" という ID を持つ要素を選択します。 + +- [属性セレクター](/ja/docs/Web/CSS/Attribute_selectors) + - : 指定された属性を持つ要素をすべて選択します。 + **構文:** `[attr]` `[attr=value]` `[attr~=value]` `[attr|=value]` `[attr^=value]` `[attr$=value]` `[attr*=value]` + **例:** `[autoplay]` は `autoplay` 属性が（どんな値でも）設定されているすべての要素を選択します。 + +## グループ化セレクター + +- [セレクターリスト](/ja/docs/Web/CSS/Selector_list) + - : `,` はグループ化の手段であり、一致するすべてのノードを選択します。 + **構文:** `A, B` + **例:** `div, span` は {{HTMLElement("span")}} と {{HTMLElement("div")}} の両要素に一致します。 + +## 結合子 + +- [子孫結合子](/ja/docs/Web/CSS/Descendant_combinator) + - : ` ` (空白) 結合子は、第 1 の要素の子孫にあたるノードを選択します。 + **構文:** `A B` + **例:** `div span` は {{HTMLElement("div")}} 要素の中にある {{HTMLElement("span")}} 要素をすべて選択します。 + +- [子結合子](/ja/docs/Web/CSS/Child_combinator) + - : `>` 結合子は、第 1 の要素の直接の子に当たるノードを選択します。 + **構文:** `A > B` + **例:** `ul > li` は {{HTMLElement("ul")}} 要素の内側に直接ネストされた {{HTMLElement("li")}} 要素をすべて選択します。 + +- [一般兄弟結合子](/ja/docs/Web/CSS/General_sibling_combinator) + - : `~` 結合子は兄弟を選択します。つまり、第2の要素が第1の要素の後にあり（ただし直後でなくても構わない）、両者が同じ親を持つ場合です。 + **構文:** `A ~ B` + **例:** `p ~ span` は {{HTMLElement("p")}} 要素の後にある {{HTMLElement("span")}} 要素をすべて選択します。 + +- [隣接兄弟結合子](/ja/docs/Web/CSS/Adjacent_sibling_combinator) + - : `+` 結合子は隣接する兄弟を選択します。つまり、第2の要素が第1の要素の直後にあり、両者が同じ親を持つ場合です。 + **構文:** `A + B` + **例:** `h2 + p` は {{HTMLElement("h2")}} 要素の後にすぐに続く {{HTMLElement("p")}} 要素をすべて選択します。 + +- [列結合子](/ja/docs/Web/CSS/Column_combinator) {{Experimental_Inline}} + - : `||` 結合子は列に所属するノードを選択します。 + **構文:** `A || B` + **例:** `col || td` は {{HTMLElement("col")}} 要素のスコープに所属するすべての {{HTMLElement("td")}} 要素を選択します。 + +## 擬似表記 + +- [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes) + - : `:` 表記により、文書ツリーの中に含まれない状態情報によって要素を選択することができます。 + **例:** `a:visited` はユーザーが訪問済みの {{HTMLElement("a")}} 要素をすべて選択します。 + +- [擬似要素](/ja/docs/Web/CSS/Pseudo-elements) + - : `::` 表記は、 HTML に含まれていないエンティティを表現します。 + **例:** `p::first-line` はすべての {{HTMLElement("p")}} 要素の先頭行を選択します。 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ---------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName("CSS4 Selectors")}} | {{Spec2("CSS4 Selectors")}} | `\|\|` 列結合子、グリッド構造セレクター、論理結合子、位置、時系列、リソース状態、言語、 UI の擬似クラス、属性値の選択における ASCII 文字の大文字小文字の区別の有無を示す修飾子を追加。 | +| {{SpecName("CSS3 Selectors")}} | {{Spec2("CSS3 Selectors")}} | `~` 一般兄弟結合子、およびツリー構造の擬似クラスを追加。擬似要素に二重コロン `::` の接頭辞を用いるようにした。追加の属性セレクター。 | +| {{SpecName("CSS2.1", "selector.html")}} | {{Spec2("CSS2.1")}} | 子結合子 `>` および隣接兄弟結合子 `+` を追加。**全称セレクター**と**属性セレクター**を追加。 | +| {{SpecName("CSS1")}} | {{Spec2("CSS1")}} | 初回定義 | + +[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes#仕様書)および[擬似要素](/ja/docs/Web/CSS/Pseudo-elements#仕様書)の詳細は、それぞれの仕様書一覧表をご覧ください。 + +## 関連情報 + +- [CSS 詳細度](/ja/docs/Web/CSS/Specificity) |