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

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

+[CSS](/ja/docs/Web/CSS) の**クラスセレクター** (class selector) は、 {{htmlattrxref("class")}} 属性の内容に基づいて要素を選択します。 -
/* class="spacious" であるすべての要素 */
+```css
+/* class="spacious" であるすべての要素 */
 .spacious {
   margin: 2em;
 }
 
-/* class="spacious" であるすべての <li> 要素 */
+/* class="spacious" であるすべての 
  •  要素 */
 li.spacious {
   margin: 2em;
 }
 
-/* "spacious" および "elegant" の両方をクラスリストに含む <li> 要素すべて */
+/* "spacious" および "elegant" の両方をクラスリストに含む 
  •  要素すべて */
 /* 例えば、 class="elegant retro spacious" */
 li.spacious.elegant {
   margin: 2em;
 }
-
    • +``` -

    構文

    +## 構文 -
    .クラス名 { スタイルプロパティ }
    +```css +.クラス名 { スタイルプロパティ } +``` -

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

    +なお、これは以下の{{Cssxref("Attribute_selectors", "属性セレクター")}}と等価です。 -
    [class~=クラス名] { スタイルプロパティ }
    +```css +[class~=クラス名] { スタイルプロパティ } +``` -

    例

    +## 例 -

    CSS

    +### CSS -
    .red {
+```css
+.red {
   color: #f33;
 }
 
@@ -52,54 +59,35 @@ li.spacious.elegant {
   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")}}

    +``` + +### HTML + +```html +

    この段落は赤い文字です。

    +

    この段落は黄色の背景に赤い文字です。

    +

    この段落は "fancy" スタイルで赤い文字です。

    +

    これは単なる普通の段落です。

    +``` + +### 結果 + +{{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) -- cgit v1.2.3-54-g00ecf