web-dev-qa-db-ja.com

CSS3セレクター：クラス名を持つ最初のタイプ？

CSS3セレクター:first-of-typeを使用して、指定されたクラス名を持つ最初の要素を選択することは可能ですか？私はテストで成功していないので、そうではないと思っていますか？

コード（ http://jsfiddle.net/YWY4L/ ）：

p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}
<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>
csscss3css-selectors
201
Adam Youngers

いいえ、セレクターを1つだけ使用することはできません。 :first-of-type疑似クラスは、そのtype（div、pなど）の最初の要素を選択します。その擬似クラスでクラスセレクター（またはタイプセレクター）を使用することは、指定されたクラス（または指定されたタイプ）を持つ要素を選択することを意味しますandが最初です兄弟間のそのタイプの。

残念ながら、CSSは、クラスの最初の出現のみを選択する:first-of-classセレクターを提供しません。回避策として、次のようなものを使用できます。

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

回避策の説明と図は here および here で示されています。

307
BoltClock

CSS Selectors Level 4ドラフトでは、 of <other-selector> selector 内に:nth-child文法を追加することを提案しています。これにより、指定された他のセレクタに一致するn番目の子を選択できます。

:nth-child(1 of p.myclass)

以前のドラフトでは、新しい擬似クラス :nth-match() が使用されていたため、機能のいくつかの説明でその構文を見ることができます。

:nth-match(1 of p.myclass)

これは今では WebKitで実装 であり、Safariでも利用可能ですが、 それをサポートする唯一のブラウザ のようです。それを実装するために提出されたチケットがあります Blink（Chrome） 、 Gecko（Firefox） 、および Edgeで実装するリクエスト 、しかし明らかではありませんこれらのいずれかの進捗。

41
Brian Campbell

これは、CSS3セレクター：first-of-typeを使用して特定のクラス名を持つ最初の要素を選択することはできませんnot。

ただし、対象の要素に前の要素の兄弟がある場合は、 否定CSS疑似クラス と 隣接する兄弟セレクタ を組み合わせて、すぐにはない要素に一致させることができます同じクラス名を持つ前の要素：

:not(.myclass1) + .myclass1

完全に機能するコード例：

p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { color: green }
<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>
12
lodz

参照用のソリューションを見つけました。いくつかのグループdivから、2つの同じクラスdivのグループから最初のものを選択します

p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}

ところで、:last-of-typeが機能する理由はわかりませんが、:first-of-typeは機能しません。

Jsfiddleでの私の実験... https://jsfiddle.net/aspanoz/m1sg4496/

9
Konstantin

これは古いスレッドですが、検索結果のリストでまだ高いように見えるので、私は応答しています。未来が到来したので、：nth-​​child疑似セレクターを使用できます。

p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }

：nth-​​child擬似セレクターは強力です-括弧は数式だけでなく数値も受け入れます。

詳細： https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

7
TDavison

フォールバックソリューションとして、次のように親要素でクラスをラップできます。

<div>
    <div>This text should appear as normal</div>
    <p>This text should be blue.</p>
    <div>
        <!-- first-child / first-of-type starts from here -->
        <p class="myclass1">This text should appear red.</p>
        <p class="myclass2">This text should appear green.</p>
    </div>
</div>
3
Gediminas Bivainis

これを行うには、同じクラスの兄弟であるクラスのすべての要素を選択して反転します。これにより、ページ上のほとんどすべての要素が選択されるため、クラスで再度選択する必要があります。

例えば：

<style>
    :not(.bar ~ .bar).bar {
        color: red;
    }
<div>
    <div class="foo"></div>
    <div class="bar"></div> <!-- Only this will be selected -->
    <div class="foo"></div>
    <div class="bar"></div>
    <div class="foo"></div>
    <div class="bar"></div>
</div>
0
Jonathan.

これをどのように説明するかはわかりませんが、今日は似たようなものに遭遇しました。 .user:first-of-type{}が正常に機能している間、.user:last-of-type{}を設定できない。これは、クラスやスタイルなしでdiv内にラップした後に修正されました。

https://codepen.io/adrianTNT/pen/WgEpbE

<style>
.user{
  display:block;
  background-color:#FFCC00;
}

.user:first-of-type{
  background-color:#FF0000;
}
</style>

<p>Not working while this P additional tag exists</p>

<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>

<p>Working while inside a div:</p>

<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>
0
adrianTNT