diff options
| -rw-r--r-- | files/ja/web/css/attribute_selectors/index.md | 264 |
1 files changed, 127 insertions, 137 deletions
diff --git a/files/ja/web/css/attribute_selectors/index.md b/files/ja/web/css/attribute_selectors/index.md index d558c24405..e9b9e5baff 100644 --- a/files/ja/web/css/attribute_selectors/index.md +++ b/files/ja/web/css/attribute_selectors/index.md @@ -2,90 +2,90 @@ title: 属性セレクター slug: Web/CSS/Attribute_selectors tags: + - 属性セレクター - CSS - - CSS 3 属性セレクター - - CSS 属性 - - Reference - - セレクター - - ノードの識別 - - ノードの選択 - リファレンス - - 属性 - - 属性セレクター - - 要素の識別 + - セレクター +browser-compat: css.selectors.attribute translation_of: Web/CSS/Attribute_selectors --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>CSS の<ruby><strong>属性セレクター</strong><rp> (</rp><rt>attribute selector</rt><rp>) </rp></ruby>は、指定された属性が存在するかどうかや、その値に基づいて要素を選択します。</p> +CSS の**属性セレクター** (attribute selector) は、指定された属性が存在するかどうか、またはその値に基づいて要素を選択します。 -<pre class="brush: css no-line-numbers notranslate">/* title 属性を持つ <a> 要素 */ +```css +/* title 属性を持つ <a> 要素 */ a[title] { - color: purple; + color: purple; } -/* href が "https://example.org" と一致する <a> 要素 */ +/* href が "https://example.org" と一致する <a> 要素 */ a[href="https://example.org"] { - color: green; + color: green; } -/* href に "example" を含む <a> 要素 */ +/* href に "example" を含む <a> 要素 */ a[href*="example"] { - font-size: 2em; + font-size: 2em; } -/* href が "org" で終わる <a> 要素 */ +/* href が "org" で終わる <a> 要素 */ a[href$=".org"] { - font-style: italic; -}</pre> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<dl> - <dt><code>[<em>attr</em>]</code></dt> - <dd><em>attr</em> という名前の属性を持つ要素を表します。</dd> - <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> - <dd><em>attr</em> という名前の属性の値が正確に <em>value</em> である要素を表します。</dd> - <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> - <dd><em>attr</em> という名前の属性の値が正確に <em>value</em> と一致する要素を表します。空白区切りの語のリストの形で、複数の <em>value</em> を含めることができます。</dd> - <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> - <dd><em>attr</em> という名前の属性の値が正確に <em>value</em> と一致するか、 <em>value</em> で始まり直後にハイフン (<code>-</code> (U+002D)) が続く要素を表します。言語のサブコードの一致によく使われます。</dd> - <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> - <dd><em>attr</em> という名前の属性の値が <em>value</em> で始まる要素を表します。</dd> - <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> - <dd><em>attr</em> という名前の属性の値が <em>value</em> で終わる要素を表します。</dd> - <dt><code>[<em>attr</em>*=<em>value</em>]</code></dt> - <dd><em>attr</em> という名前の属性の値が、文字列中に <em>value</em> を1つ以上含む要素を表します。</dd> - <dt id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt> - <dd>閉じ角括弧の前に <code>i</code> (または <code>I</code>) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別せずに比較されます。</dd> - <dt id="case-sensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> s]</code> {{Experimental_Inline}}</dt> - <dd>閉じ角括弧の前に <code>s</code> (または <code>S</code>) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別して比較されます。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Links" name="Links">リンク</h3> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">a { - color: blue; + font-style: italic; +} + +/* <a> 要素の class 属性に "logo" という語が含まれているもの */ +a[class~="logo"] { + padding: 2px; +} +``` + +## 構文 + +- `[attr]` + - : _attr_ という名前の属性を持つ要素を表します。 +- `[attr=value]` + - : _attr_ という名前の属性の値が正確に _value_ である要素を表します。 +- `[attr~=value]` + - : _attr_ という名前の属性の値が正確に _value_ と一致する要素を表します。空白区切りの語のリストの形で、複数の _value_ を含めることができます。 +- `[attr|=value]` + - : _attr_ という名前の属性の値が正確に _value_ と一致するか、 _value_ で始まり直後にハイフン (`-` (U+002D)) が続く要素を表します。言語のサブコードの一致によく使われます。 +- `[attr^=value]` + - : _attr_ という名前の属性の値が _value_ で始まる要素を表します。 +- `[attr$=value]` + - : _attr_ という名前の属性の値が _value_ で終わる要素を表します。 +- `[attr*=value]` + - : _attr_ という名前の属性の値が、文字列中に _value_ を1つ以上含む要素を表します。 +- `[attr operator value i]` + - : 閉じ角括弧の前に `i` (または `I`) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別せずに比較されます。 +- `[attr operator value s]` {{Experimental_Inline}} + - : 閉じ角括弧の前に `s` (または `S`) を追加すると、 (ASCII の範囲内の文字の場合) 値は大文字と小文字を区別して比較されます。 + +## 例 + +### リンク + +#### CSS + +```css +a { + color: blue; } /* "#" で始まる内部リンク */ a[href^="#"] { - background-color: gold; + background-color: gold; } /* URL のどこかに "example" が含まれるリンク */ a[href*="example"] { - background-color: silver; + background-color: silver; } /* URL のどこかに "insensitive" が含まれるリンクで、 大文字小文字は区別しない */ a[href*="insensitive" i] { - color: cyan; + color: cyan; } /* URL のどこかに "cAsE" があるリンクに一致 @@ -96,31 +96,46 @@ a[href*="cAsE" s] { /* ".org" で終わるリンク */ a[href$=".org"] { - color: red; -}</pre> + color: red; +} -<h4 id="HTML">HTML</h4> +/* "https" で始まり ".org" で終わるリンク */ +a[href^="https"][href$=".org"] { + color: green; +} +``` + +#### HTML -<pre class="brush: html notranslate"><ul> - <li><a href="#internal">Internal link</a></li> - <li><a href="http://example.com">Example link</a></li> - <li><a href="#InSensitive">Insensitive internal link</a></li> - <li><a href="http://example.org">Example org link</a></li> -</ul></pre> +```html +<ul> + <li><a href="#internal">Internal link</a></li> + <li><a href="http://example.com">Example link</a></li> + <li><a href="#InSensitive">Insensitive internal link</a></li> + <li><a href="http://example.org">Example org link</a></li> + <li><a href="https://example.org">Example https org link</a></li> +</ul> +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Links")}}</p> +{{EmbedLiveSample("Links")}} -<h3 id="Languages" name="Languages">言語</h3> +### 言語 -<h4 id="CSS_2" name="CSS_2">CSS</h4> +#### CSS -<pre class="brush: css notranslate">/* `lang` 属性があるすべての div を太字にする。 */ +```css +/* `lang` 属性があるすべての div を太字にする。 */ div[lang] { font-weight: bold; } +/* すべｔの div のうち `lang` 属性のない者をイタリックにする。 */ +div:not([lang]) { + font-style: italic; +} + /* アメリカ英語の div はすべて青。 */ div[lang~="en-us"] { color: blue; @@ -142,30 +157,30 @@ div[lang|="zh"] { div[data-lang="zh-TW"] { color: purple; } -</pre> +``` -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div lang="en-us en-gb en-au en-nz">Hello World!</div> -<div lang="pt">Olá Mundo!</div> -<div lang="zh-CN">世界您好！</div> -<div lang="zh-TW">世界您好！</div> -<div data-lang="zh-TW">世界您好！</div> -</pre> +```html +<div lang="en-us en-gb en-au en-nz">Hello World!</div> +<div lang="pt">Olá Mundo!</div> +<div lang="zh-CN">世界您好！</div> +<div lang="zh-TW">世界您好！</div> +<div data-lang="zh-TW">世界您好！</div> +``` -<h4 id="Result_2" name="Result_2">結果</h4> +#### 結果 -<p>{{EmbedLiveSample("Languages")}}</p> +{{EmbedLiveSample("Languages")}} -<h3 id="HTML_ordered_lists" name="HTML_ordered_lists">HTML 順序付きリスト</h3> +### HTML 順序付きリスト -<p>{{SeeCompatTable}}</p> +HTML 仕様書では、 {{htmlattrxref("type", "input")}} 属性は主に {{HTMLElement("input")}} 要素で使用されるため、大文字小文字の区別なく一致することを要求しており、順序付きリスト ({{HTMLElement("ol")}}) 要素の {{htmlattrxref("type", "ol")}} 属性に使おうとすると、 [case-sensitive](#case-sensitive) 修飾子がなければ正しく動作しません。 -<p>HTML 仕様書では、 {{htmlattrxref("type", "input")}} 属性は主に {{HTMLElement("input")}} 要素で使用されるため、大文字小文字の区別なく一致することを要求しており、順序付きリスト ({{HTMLElement("ol")}}) 要素の {{htmlattrxref("type", "ol")}} 属性に使おうとすると、 <a href="#case-sensitive">case-sensitive</a> 修飾子がなければ正しく動作しません。</p> +#### CSS -<h4 id="CSS_3">CSS</h4> - -<pre class="brush: css notranslate">/* HTML が type 属性を扱う方法の癖の都合上、リストの種別には、大文字小文字を区別する指定が必要です。 */ +```css +/* HTML が type 属性を扱う方法の癖の都合上、リストの種別には、大文字小文字を区別する指定が必要です。 */ ol[type="a"] { list-style-type: lower-alpha; background: red; @@ -179,56 +194,31 @@ ol[type="a" s] { ol[type="A" s] { list-style-type: upper-alpha; background: lime; -}</pre> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html; notranslate"><ol type="A"> - <li>Example list</li> -</ol></pre> - -<h4 id="結果">結果</h4> - -<p>{{EmbedLiveSample("HTML_ordered_lists")}}</p> - -<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", "#attribute-selectors", "attribute selectors")}}</td> - <td>{{Spec2("CSS4 Selectors")}}</td> - <td>ASCII の大文字小文字を区別する選択、区別しない選択のための修飾子を追加</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}</td> - <td>{{Spec2("CSS3 Selectors")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.selectors.attribute")}}</p> - -<h2 id="関連情報">関連情報</h2> +} +``` -<ul> - <li>{{CSSxRef("attr")}}</li> - <li>単一要素の選択: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, {{DOMxRef("Element.querySelector()")}}</li> - <li>一致するすべての要素の選択: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, {{DOMxRef("Element.querySelectorAll()")}}</li> - <li>上記のメソッドはすべて {{domxref("ParentNode")}} に混在して実装されています。 {{DOMxRef("ParentNode.querySelector()")}} および {{DOMxRef("ParentNode.querySelectorAll()")}} を参照してください</li> -</ul> +#### HTML + +```html +<ol type="A"> + <li>Example list</li> +</ol> +``` + +#### 結果 + +{{EmbedLiveSample("HTML_ordered_lists")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{CSSxRef("attr")}} +- 単一要素の選択: {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}}, {{DOMxRef("Element.querySelector()")}} +- 一致するすべての要素の選択: {{DOMxRef("Document.querySelectorAll()")}}, {{DOMxRef("DocumentFragment.querySelectorAll()")}}, {{DOMxRef("Element.querySelectorAll()")}} |