diff options
| -rw-r--r-- | files/ja/web/css/class_selectors/index.md | 118 |
1 files changed, 53 insertions, 65 deletions
diff --git a/files/ja/web/css/class_selectors/index.md b/files/ja/web/css/class_selectors/index.md index d2f1fca347..ca6baf9f71 100644 --- a/files/ja/web/css/class_selectors/index.md +++ b/files/ja/web/css/class_selectors/index.md @@ -3,44 +3,51 @@ title: クラスセレクター slug: Web/CSS/Class_selectors tags: - CSS - - Reference + - リファレンス - セレクター +browser-compat: css.selectors.class translation_of: Web/CSS/Class_selectors --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の<ruby><strong>クラスセレクター</strong><rp> (</rp><rt>class selector</rt><rp>) </rp></ruby>は、 {{htmlattrxref("class")}} 属性の内容に基づいて要素を選択します。</p> +[CSS](/ja/docs/Web/CSS) の**クラスセレクター** (class selector) は、 {{htmlattrxref("class")}} 属性の内容に基づいて要素を選択します。 -<pre class="brush: css no-line-numbers">/* class="spacious" であるすべての要素 */ +```css +/* class="spacious" であるすべての要素 */ .spacious { margin: 2em; } -/* class="spacious" であるすべての <li> 要素 */ +/* class="spacious" であるすべての <li> 要素 */ li.spacious { margin: 2em; } -/* "spacious" および "elegant" の両方をクラスリストに含む <li> 要素すべて */ +/* "spacious" および "elegant" の両方をクラスリストに含む <li> 要素すべて */ /* 例えば、 class="elegant retro spacious" */ li.spacious.elegant { margin: 2em; } -</pre> +``` -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="syntaxbox">.クラス名 { <em>スタイルプロパティ</em> }</pre> +```css +.クラス名 { スタイルプロパティ } +``` -<p>なお、これは以下の{{Cssxref("Attribute_selectors", "属性セレクター")}}と等価です。</p> +なお、これは以下の{{Cssxref("Attribute_selectors", "属性セレクター")}}と等価です。 -<pre class="syntaxbox">[class~=クラス名] { <em>スタイルプロパティ</em> }</pre> +```css +[class~=クラス名] { スタイルプロパティ } +``` -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css">.red { +```css +.red { color: #f33; } @@ -52,54 +59,35 @@ li.spacious.elegant { font-weight: bold; text-shadow: 4px 4px 3px #77f; } -</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><p class="red">この段落は赤い文字です。</p> -<p class="red yellow-bg">この段落は黄色の背景に赤い文字です。</p> -<p class="red fancy">この段落は「fancy」スタイルで赤い文字です。</p> -<p>これは単なる普通の段落です。</p> -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample('Example')}}</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', '#class-html', 'class selectors')}}</td> - <td>{{Spec2('CSS4 Selectors')}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td> - <td>{{Spec2('CSS3 Selectors')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</td> - <td>{{Spec2('CSS1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<p>{{Compat("css.selectors.class")}}</p> +``` + +### HTML + +```html +<p class="red">この段落は赤い文字です。</p> +<p class="red yellow-bg">この段落は黄色の背景に赤い文字です。</p> +<p class="red fancy">この段落は "fancy" スタイルで赤い文字です。</p> +<p>これは単なる普通の段落です。</p> +``` + +### 結果 + +{{EmbedLiveSample('Examples')}} + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------ | +| {{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 セレクター](/ja/docs/Web/CSS/CSS_Selectors) +- [CSS の学習: セレクター](/ja/docs/Learn/CSS/Building_blocks/Selectors) |