From 3cf333fe1acf5afa23dac5c2beaa20398e08a25f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 6 Jan 2022 01:46:13 +0900 Subject: 各セレクターの記事を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/attribute_selectors/index.html | 234 ------------------------ files/ja/web/css/attribute_selectors/index.md | 234 ++++++++++++++++++++++++ files/ja/web/css/class_selectors/index.html | 105 ----------- files/ja/web/css/class_selectors/index.md | 105 +++++++++++ files/ja/web/css/id_selectors/index.html | 83 --------- files/ja/web/css/id_selectors/index.md | 83 +++++++++ files/ja/web/css/type_selectors/index.html | 83 --------- files/ja/web/css/type_selectors/index.md | 83 +++++++++ files/ja/web/css/universal_selectors/index.html | 104 ----------- files/ja/web/css/universal_selectors/index.md | 104 +++++++++++ 10 files changed, 609 insertions(+), 609 deletions(-) delete mode 100644 files/ja/web/css/attribute_selectors/index.html create mode 100644 files/ja/web/css/attribute_selectors/index.md delete mode 100644 files/ja/web/css/class_selectors/index.html create mode 100644 files/ja/web/css/class_selectors/index.md delete mode 100644 files/ja/web/css/id_selectors/index.html create mode 100644 files/ja/web/css/id_selectors/index.md delete mode 100644 files/ja/web/css/type_selectors/index.html create mode 100644 files/ja/web/css/type_selectors/index.md delete mode 100644 files/ja/web/css/universal_selectors/index.html create mode 100644 files/ja/web/css/universal_selectors/index.md (limited to 'files/ja') diff --git a/files/ja/web/css/attribute_selectors/index.html b/files/ja/web/css/attribute_selectors/index.html deleted file mode 100644 index d558c24405..0000000000 --- a/files/ja/web/css/attribute_selectors/index.html +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: 属性セレクター -slug: Web/CSS/Attribute_selectors -tags: - - CSS - - CSS 3 属性セレクター - - CSS 属性 - - Reference - - セレクター - - ノードの識別 - - ノードの選択 - - リファレンス - - 属性 - - 属性セレクター - - 要素の識別 -translation_of: Web/CSS/Attribute_selectors ---- -
{{CSSRef}}
- -

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

- -
/* title 属性を持つ <a> 要素 */
-a[title] {
-		color: purple;
-}
-
-/* href が "https://example.org" と一致する <a> 要素 */
-a[href="https://example.org"] {
-		color: green;
-}
-
-/* href に "example" を含む <a> 要素 */
-a[href*="example"] {
-		font-size: 2em;
-}
-
-/* href が "org" で終わる <a> 要素 */
-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;
-}
-
-/* "#" で始まる内部リンク */
-a[href^="#"] {
-		background-color: gold;
-}
-
-/* URL のどこかに "example" が含まれるリンク */
-a[href*="example"] {
-		background-color: silver;
-}
-
-/* URL のどこかに "insensitive" が含まれるリンクで、
-			大文字小文字は区別しない */
-a[href*="insensitive" i] {
-		color: cyan;
-}
-
-/* URL のどこかに "cAsE" があるリンクに一致
-大文字小文字の区別つき */
-a[href*="cAsE" s] {
-  color: pink;
-}
-
-/* ".org" で終わるリンク */
-a[href$=".org"] {
-		color: red;
-}
- -

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

結果

- -

{{EmbedLiveSample("Links")}}

- -

言語

- -

CSS

- -
/* `lang` 属性があるすべての div を太字にする。 */
-div[lang] {
-  font-weight: bold;
-}
-
-/* アメリカ英語の div はすべて青。 */
-div[lang~="en-us"] {
-  color: blue;
-}
-
-/* ポルトガル語の div はすべて緑。 */
-div[lang="pt"] {
-  color: green;
-}
-
-/* 中国語の div はすべて赤。
-   simplified (zh-CN) or traditional (zh-TW). */
-div[lang|="zh"] {
-  color: red;
-}
-
-/* 'data-lang' が中国語繁体字の div はすべて紫。 */
-/* 注: ハイフン区切りの属性は二重引用符なしで使用できる */
-div[data-lang="zh-TW"] {
-  color: purple;
-}
-
- -

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

結果

- -

{{EmbedLiveSample("Languages")}}

- -

HTML 順序付きリスト

- -

{{SeeCompatTable}}

- -

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

- -

CSS

- -
/* HTML が type 属性を扱う方法の癖の都合上、リストの種別には、大文字小文字を区別する指定が必要です。 */
-ol[type="a"] {
-  list-style-type: lower-alpha;
-  background: red;
-}
-
-ol[type="a" s] {
-  list-style-type: lower-alpha;
-  background: lime;
-}
-
-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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/attribute_selectors/index.md b/files/ja/web/css/attribute_selectors/index.md new file mode 100644 index 0000000000..d558c24405 --- /dev/null +++ b/files/ja/web/css/attribute_selectors/index.md @@ -0,0 +1,234 @@ +--- +title: 属性セレクター +slug: Web/CSS/Attribute_selectors +tags: + - CSS + - CSS 3 属性セレクター + - CSS 属性 + - Reference + - セレクター + - ノードの識別 + - ノードの選択 + - リファレンス + - 属性 + - 属性セレクター + - 要素の識別 +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

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

+ +
/* title 属性を持つ <a> 要素 */
+a[title] {
+		color: purple;
+}
+
+/* href が "https://example.org" と一致する <a> 要素 */
+a[href="https://example.org"] {
+		color: green;
+}
+
+/* href に "example" を含む <a> 要素 */
+a[href*="example"] {
+		font-size: 2em;
+}
+
+/* href が "org" で終わる <a> 要素 */
+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;
+}
+
+/* "#" で始まる内部リンク */
+a[href^="#"] {
+		background-color: gold;
+}
+
+/* URL のどこかに "example" が含まれるリンク */
+a[href*="example"] {
+		background-color: silver;
+}
+
+/* URL のどこかに "insensitive" が含まれるリンクで、
+			大文字小文字は区別しない */
+a[href*="insensitive" i] {
+		color: cyan;
+}
+
+/* URL のどこかに "cAsE" があるリンクに一致
+大文字小文字の区別つき */
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* ".org" で終わるリンク */
+a[href$=".org"] {
+		color: red;
+}
+ +

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

結果

+ +

{{EmbedLiveSample("Links")}}

+ +

言語

+ +

CSS

+ +
/* `lang` 属性があるすべての div を太字にする。 */
+div[lang] {
+  font-weight: bold;
+}
+
+/* アメリカ英語の div はすべて青。 */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* ポルトガル語の div はすべて緑。 */
+div[lang="pt"] {
+  color: green;
+}
+
+/* 中国語の div はすべて赤。
+   simplified (zh-CN) or traditional (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* 'data-lang' が中国語繁体字の div はすべて紫。 */
+/* 注: ハイフン区切りの属性は二重引用符なしで使用できる */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

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

結果

+ +

{{EmbedLiveSample("Languages")}}

+ +

HTML 順序付きリスト

+ +

{{SeeCompatTable}}

+ +

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

+ +

CSS

+ +
/* HTML が type 属性を扱う方法の癖の都合上、リストの種別には、大文字小文字を区別する指定が必要です。 */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/class_selectors/index.html b/files/ja/web/css/class_selectors/index.html deleted file mode 100644 index d2f1fca347..0000000000 --- a/files/ja/web/css/class_selectors/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: クラスセレクター -slug: Web/CSS/Class_selectors -tags: - - CSS - - Reference - - セレクター -translation_of: Web/CSS/Class_selectors ---- -
{{CSSRef}}
- -

CSS のクラスセレクター (class selector) は、 {{htmlattrxref("class")}} 属性の内容に基づいて要素を選択します。

- -
/* class="spacious" であるすべての要素 */
-.spacious {
-  margin: 2em;
-}
-
-/* class="spacious" であるすべての <li> 要素 */
-li.spacious {
-  margin: 2em;
-}
-
-/* "spacious" および "elegant" の両方をクラスリストに含む <li> 要素すべて */
-/* 例えば、 class="elegant retro spacious" */
-li.spacious.elegant {
-  margin: 2em;
-}
-
- -

構文

- -
.クラス名 { スタイルプロパティ }
- -

なお、これは以下の{{Cssxref("Attribute_selectors", "属性セレクター")}}と等価です。

- -
[class~=クラス名] { スタイルプロパティ }
- -

例

- -

CSS

- -
.red {
-  color: #f33;
-}
-
-.yellow-bg {
-  background: #ffa;
-}
-
-.fancy {
-  font-weight: bold;
-  text-shadow: 4px 4px 3px #77f;
-}
-
- -

HTML

- -
<p class="red">この段落は赤い文字です。</p>
-<p class="red yellow-bg">この段落は黄色の背景に赤い文字です。</p>
-<p class="red fancy">この段落は「fancy」スタイルで赤い文字です。</p>
-<p>これは単なる普通の段落です。</p>
-
- -

結果

- -

{{EmbedLiveSample('Example')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}変更なし
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザー実装状況

- -

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

diff --git a/files/ja/web/css/class_selectors/index.md b/files/ja/web/css/class_selectors/index.md new file mode 100644 index 0000000000..d2f1fca347 --- /dev/null +++ b/files/ja/web/css/class_selectors/index.md @@ -0,0 +1,105 @@ +--- +title: クラスセレクター +slug: Web/CSS/Class_selectors +tags: + - CSS + - Reference + - セレクター +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef}}
+ +

CSS のクラスセレクター (class selector) は、 {{htmlattrxref("class")}} 属性の内容に基づいて要素を選択します。

+ +
/* class="spacious" であるすべての要素 */
+.spacious {
+  margin: 2em;
+}
+
+/* class="spacious" であるすべての <li> 要素 */
+li.spacious {
+  margin: 2em;
+}
+
+/* "spacious" および "elegant" の両方をクラスリストに含む <li> 要素すべて */
+/* 例えば、 class="elegant retro spacious" */
+li.spacious.elegant {
+  margin: 2em;
+}
+
+ +

構文

+ +
.クラス名 { スタイルプロパティ }
+ +

なお、これは以下の{{Cssxref("Attribute_selectors", "属性セレクター")}}と等価です。

+ +
[class~=クラス名] { スタイルプロパティ }
+ +

例

+ +

CSS

+ +
.red {
+  color: #f33;
+}
+
+.yellow-bg {
+  background: #ffa;
+}
+
+.fancy {
+  font-weight: bold;
+  text-shadow: 4px 4px 3px #77f;
+}
+
+ +

HTML

+ +
<p class="red">この段落は赤い文字です。</p>
+<p class="red yellow-bg">この段落は黄色の背景に赤い文字です。</p>
+<p class="red fancy">この段落は「fancy」スタイルで赤い文字です。</p>
+<p>これは単なる普通の段落です。</p>
+
+ +

結果

+ +

{{EmbedLiveSample('Example')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}変更なし
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザー実装状況

+ +

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

diff --git a/files/ja/web/css/id_selectors/index.html b/files/ja/web/css/id_selectors/index.html deleted file mode 100644 index 6557f2663b..0000000000 --- a/files/ja/web/css/id_selectors/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: ID セレクター -slug: Web/CSS/ID_selectors -tags: - - CSS - - Reference - - Selector - - Selectors -translation_of: Web/CSS/ID_selectors ---- -
{{CSSRef}}
- -

CSS の ID セレクター (ID selector) は、 {{htmlattrxref("id")}} 属性の値に基づいて要素と一致します。選択される要素の id 属性は、セレクターで指定した値と完全一致していなければなりません。

- -
/* id="demo" のついた要素 */
-#demo {
-  border: red 2px solid;
-}
- -

構文

- -
#id_value { スタイルプロパティ }
- -

なお、これは次の{{Cssxref("Attribute_selectors", "属性セレクター")}}と等価です (ただし、詳細度は異なります)。

- -
[id=id_value] { スタイルプロパティ }
- -

例

- -

CSS

- -
#identified {
-  background-color: skyblue;
-}
-
- -

HTML

- -
<div id="identified">これは特別な ID がついています！</div>
-<div>これは単なる普通の div です。</div>
-
- -

結果

- -

{{EmbedLiveSample("Examples", '100%', 50)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}初回定義
- -

ブラウザーの互換性

- -

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

diff --git a/files/ja/web/css/id_selectors/index.md b/files/ja/web/css/id_selectors/index.md new file mode 100644 index 0000000000..6557f2663b --- /dev/null +++ b/files/ja/web/css/id_selectors/index.md @@ -0,0 +1,83 @@ +--- +title: ID セレクター +slug: Web/CSS/ID_selectors +tags: + - CSS + - Reference + - Selector + - Selectors +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef}}
+ +

CSS の ID セレクター (ID selector) は、 {{htmlattrxref("id")}} 属性の値に基づいて要素と一致します。選択される要素の id 属性は、セレクターで指定した値と完全一致していなければなりません。

+ +
/* id="demo" のついた要素 */
+#demo {
+  border: red 2px solid;
+}
+ +

構文

+ +
#id_value { スタイルプロパティ }
+ +

なお、これは次の{{Cssxref("Attribute_selectors", "属性セレクター")}}と等価です (ただし、詳細度は異なります)。

+ +
[id=id_value] { スタイルプロパティ }
+ +

例

+ +

CSS

+ +
#identified {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<div id="identified">これは特別な ID がついています！</div>
+<div>これは単なる普通の div です。</div>
+
+ +

結果

+ +

{{EmbedLiveSample("Examples", '100%', 50)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}初回定義
+ +

ブラウザーの互換性

+ +

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

diff --git a/files/ja/web/css/type_selectors/index.html b/files/ja/web/css/type_selectors/index.html deleted file mode 100644 index 028fda8d7e..0000000000 --- a/files/ja/web/css/type_selectors/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 要素型セレクター -slug: Web/CSS/Type_selectors -tags: - - CSS - - HTML - - Node - - Reference - - Selectors - - セレクター -translation_of: Web/CSS/Type_selectors ---- -
{{ CSSRef }}
- -

CSS の要素型セレクター (type selector) は、ノード名で要素をマッチさせます。つまり、文書内にある指定された型の要素をすべて選択します。

- -
/* すべての <a> 要素。 */
-a {
-  color: red;
-}
- -

構文

- -
要素名 { スタイルプロパティ }
-
- -

例

- -

CSS

- -
span {
-  background-color: skyblue;
-}
-
- -

HTML

- -
<span>テキストを持つspanタグです。</span>
-<p>テキストを持つpタグです。</p>
-<span>追加のテキストを持つspanタグです。</span>
-
- -

結果

- -

{{EmbedLiveSample('Example', '100%', 150)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}変更なし
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}変更なし
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザー実装状況

- -

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

diff --git a/files/ja/web/css/type_selectors/index.md b/files/ja/web/css/type_selectors/index.md new file mode 100644 index 0000000000..028fda8d7e --- /dev/null +++ b/files/ja/web/css/type_selectors/index.md @@ -0,0 +1,83 @@ +--- +title: 要素型セレクター +slug: Web/CSS/Type_selectors +tags: + - CSS + - HTML + - Node + - Reference + - Selectors + - セレクター +translation_of: Web/CSS/Type_selectors +--- +
{{ CSSRef }}
+ +

CSS の要素型セレクター (type selector) は、ノード名で要素をマッチさせます。つまり、文書内にある指定された型の要素をすべて選択します。

+ +
/* すべての <a> 要素。 */
+a {
+  color: red;
+}
+ +

構文

+ +
要素名 { スタイルプロパティ }
+
+ +

例

+ +

CSS

+ +
span {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<span>テキストを持つspanタグです。</span>
+<p>テキストを持つpタグです。</p>
+<span>追加のテキストを持つspanタグです。</span>
+
+ +

結果

+ +

{{EmbedLiveSample('Example', '100%', 150)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}変更なし
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}変更なし
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザー実装状況

+ +

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

diff --git a/files/ja/web/css/universal_selectors/index.html b/files/ja/web/css/universal_selectors/index.html deleted file mode 100644 index 7d273090c6..0000000000 --- a/files/ja/web/css/universal_selectors/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: 全称セレクター -slug: Web/CSS/Universal_selectors -tags: - - CSS - - Reference - - Selectors - - セレクター -translation_of: Web/CSS/Universal_selectors ---- -
{{CSSRef}}
- -

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

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

CSS3 から、アスタリスクは{{cssxref("CSS_Namespaces", "名前空間")}}と組み合わせて使用できるようになりました。

- - - -

構文

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

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

- -

例

- -

CSS

- -
* [lang^=en] {
-  color: green;
-}
-
-*.warning {
-  color: red;
-}
-
-*#maincontent {
-  border: 1px solid blue;
-}
-
-.floating {
-  float: left
-}
-
-/* フロート要素の後の兄弟要素で自動的にフロートをクリアする */
-.floating + * {
-  clear: left;
-}
-
- -

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

結果

- -

{{EmbedLiveSample('Examples')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}変更なし
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}名前空間に関する振る舞いを定義し、疑似要素の中でセレクターを省略できる旨を明記
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの対応

- -

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

diff --git a/files/ja/web/css/universal_selectors/index.md b/files/ja/web/css/universal_selectors/index.md new file mode 100644 index 0000000000..7d273090c6 --- /dev/null +++ b/files/ja/web/css/universal_selectors/index.md @@ -0,0 +1,104 @@ +--- +title: 全称セレクター +slug: Web/CSS/Universal_selectors +tags: + - CSS + - Reference + - Selectors + - セレクター +translation_of: Web/CSS/Universal_selectors +--- +
{{CSSRef}}
+ +

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

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

CSS3 から、アスタリスクは{{cssxref("CSS_Namespaces", "名前空間")}}と組み合わせて使用できるようになりました。

+ + + +

構文

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

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

+ +

例

+ +

CSS

+ +
* [lang^=en] {
+  color: green;
+}
+
+*.warning {
+  color: red;
+}
+
+*#maincontent {
+  border: 1px solid blue;
+}
+
+.floating {
+  float: left
+}
+
+/* フロート要素の後の兄弟要素で自動的にフロートをクリアする */
+.floating + * {
+  clear: left;
+}
+
+ +

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

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Selectors', '#the-universal-selector', 'universal selector')}}{{Spec2('CSS4 Selectors')}}変更なし
{{SpecName('CSS3 Selectors', '#universal-selector', 'universal selector')}}{{Spec2('CSS3 Selectors')}}名前空間に関する振る舞いを定義し、疑似要素の中でセレクターを省略できる旨を明記
{{SpecName('CSS2.1', 'selector.html#universal-selector', 'universal selector')}}{{Spec2('CSS2.1')}}初回定義
+ +

ブラウザーの対応

+ +

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

-- cgit v1.2.3-54-g00ecf