web-dev-qa-db-ja.com

特定のクラスを持つ要素を選択するにはどうすればよいですか？

私の理解では、element.classを使用すると、クラスに割り当てられた特定の要素が、クラスの他の部分とは異なる「スタイル」を受け取ることができるはずです。これは、これを使用すべきかどうかについての質問ではなく、このセレクタがどのように機能するかを理解しようとしています。インターネット上のたくさんの例を見ると、構文は正しいと思いますが、なぜこれが機能しないのか理解できません。

以下に例を示します。

CSS：

h2 {
    color: red;
}

.myClass {
    color: green;
}

h2.myClass {
    color: blue;
}

HTML：

<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
    <h1>This header should be GREEN to match the class selector</h1>
    <h2>This header should be BLUE to match the element.class selector</h2>
</div>
htmlcsssyntaxcss-selectors
64
Carolyn

次のようになります。

h2.myClassは、クラスmyClassでh2を探します。ただし、実際には.myClass内でh2のスタイルを適用するため、子孫セレクター.myClass h2を使用できます。

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

デモ

これは ref セレクターに関する基本的な考えを与え、 descendant selectors を見る

86
PSL

h2.myClassは、h2を含むすべてのclass="myClass"を指します。

.myClass h2は、h2を持つ要素の子（つまりネストされた）であるすべてのclass="myClass"を指します。

HTMLのh2を青く表示する場合は、CSSを次のように変更します。

.myClass h2 {
    color: blue;
}

タグではなくクラスによってh2を参照できるようにする場合は、CSSをそのままにして、HTMLでh2クラスを指定する必要があります。

<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>
50
ASGM

Element.classセレクターは、次のようなスタイリング状況用です。

<span class="large"> </span>
<p class="large"> </p>

.large {
    font-size:150%; font-weight:bold;
}

p.large {
    color:blue;
}

スパンとpの両方に、.largeからfont-sizeとfont-weightが割り当てられますが、青色はpにのみ割り当てられます。

他の人が指摘しているように、作業しているのは子孫セレクターです。

10
Andrew Clody

h2.myClassは、クラスmyClassが直接割り当てられたh2要素に対してのみ有効です。

次のように注意してください。

.myClass h2

タグ名がh2であるmyClassのすべての子を選択します

2
RienNeVaPlu͢s