From fb9a8fa699d006119db400794807a32c73e2ce9d Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 6 Jan 2022 02:36:42 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/attribute_selectors/index.md | 264 +++++++++++++------------- 1 file changed, 127 insertions(+), 137 deletions(-) (limited to 'files/ja/web/css') 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 --- -
{{CSSRef}}
+{{CSSRef}} -

CSS の属性セレクター (attribute selector) は、指定された属性が存在するかどうかや、その値に基づいて要素を選択します。

+CSS の**属性セレクター** (attribute selector) は、指定された属性が存在するかどうか、またはその値に基づいて要素を選択します。 -
/* title 属性を持つ <a> 要素 */
+```css
+/* title 属性を持つ  要素 */
 a[title] {
-		color: purple;
+  color: purple;
 }
 
-/* href が "https://example.org" と一致する <a> 要素 */
+/* href が "https://example.org" と一致する  要素 */
 a[href="https://example.org"] {
-		color: green;
+  color: green;
 }
 
-/* href に "example" を含む <a> 要素 */
+/* href に "example" を含む  要素 */
 a[href*="example"] {
-		font-size: 2em;
+  font-size: 2em;
 }
 
-/* href が "org" で終わる <a> 要素 */
+/* href が "org" で終わる  要素 */
 a[href$=".org"] {
-		font-style: italic;
-}
- -

構文

- -
-
[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

- -
a {
-		color: blue;
+  font-style: italic;
+}
+
+/*  要素の 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;
-}
+ color: red; +} -

HTML

+/* "https" で始まり ".org" で終わるリンク */ +a[href^="https"][href$=".org"] { +  color: green; +} +``` + +#### 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>
-</ul>
+```html + +``` -

結果

+#### 結果 -

{{EmbedLiveSample("Links")}}

+{{EmbedLiveSample("Links")}} -

言語

+### 言語 -

CSS

+#### CSS -
/* `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;
 }
-
+``` -

HTML

+#### 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>
-
+```html +
Hello World!
+
Olá Mundo!
+
世界您好！
+
世界您好！
+
世界您好！
+``` -

結果

+#### 結果 -

{{EmbedLiveSample("Languages")}}

+{{EmbedLiveSample("Languages")}} -

HTML 順序付きリスト

+### HTML 順序付きリスト -

{{SeeCompatTable}}

+HTML 仕様書では、 {{htmlattrxref("type", "input")}} 属性は主に {{HTMLElement("input")}} 要素で使用されるため、大文字小文字の区別なく一致することを要求しており、順序付きリスト ({{HTMLElement("ol")}}) 要素の {{htmlattrxref("type", "ol")}} 属性に使おうとすると、 [case-sensitive](#case-sensitive) 修飾子がなければ正しく動作しません。 -

HTML 仕様書では、 {{htmlattrxref("type", "input")}} 属性は主に {{HTMLElement("input")}} 要素で使用されるため、大文字小文字の区別なく一致することを要求しており、順序付きリスト ({{HTMLElement("ol")}}) 要素の {{htmlattrxref("type", "ol")}} 属性に使おうとすると、 case-sensitive 修飾子がなければ正しく動作しません。

+#### CSS -

CSS

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

HTML

- -
<ol type="A">
-  <li>Example list</li>
-</ol>
- -

結果

- -

{{EmbedLiveSample("HTML_ordered_lists")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS4 Selectors")}}ASCII の大文字小文字を区別する選択、区別しない選択のための修飾子を追加
{{SpecName("CSS3 Selectors", "#attribute-selectors", "attribute selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#attribute-selectors", "attribute selectors")}}{{Spec2("CSS2.1")}}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.selectors.attribute")}}

- -

関連情報

+} +``` - +#### HTML + +```html +
    + 
  1. Example list
    2. +
+``` + +#### 結果 + +{{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()")}} -- cgit v1.2.3-54-g00ecf