css - CSS3のjQueryの:firstセレクターに相当するものはありますか?

Question

次のマークアップがあります。

<div class="a"></div>
<div class="b"></div> <!-- :first -->
<div class="b"></div>
<div class="b"></div> <!-- :last -->
<div class="c"></div>

class で最初と最後 をターゲットにしようとしています。これにjQueryセレクターを使用していた場合、そのトリックを実行します。<div>b.b:first.b:last

ただし、CSS の場合は注意が必要です。最初のものは別のクラスで次から次へ<div class="b">と配置され<div>、 :first-child と :first-of-type の両方<div>が class を持つ最初のものと一致しaます。

クラスに一致する最初のアイテムを対象とするセレクターはありますか?

Answer 1

:firstいいえ、jQueryまたはセレクターに相当する CSS セレクターはありません。:lastこれらのセレクターはフィルターであり、CSS 定義による真の単純なセレクターではないためです。

セレクター 3 には、セレクターがない:first-of-classか、類似したセレクターもありません。

ただし、~コンビネータでオーバーライド ルールを使用して、特定のクラスの最初の子にスタイルを適用できます。

• クラスを持つ最初の要素の CSS セレクター
• 特定のクラスの最初の要素を選択する CSS セレクター

しかし現在、CSS を使用して特定のクラスの最後の子にスタイルを適用する方法はありません。

• 現在のブラウザを使用して疑似クラスを使用して特定のクラスの最初と最後を検出することは可能ですか?

Answer 2

You can always but a wrapper around the divs with the b class also, and target the contents of that using the :first-child and :last-child selectors.

See example here: http://cssdesk.com/fYTHF