4

次のような HTML があります。

<div class="SomeContainer">
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <div class="MyOtherClass"></div>
</div>

そして、私は次のCSSを使用します

.MyClass{...}
.MyClass:last-child{box-shadow:0px 5px 10px black;}

特定のクラスの最後の子で動作すると誤って想定しlast-childましたが、実際には同じクラスのコンテナーの最後の子で動作します。

何か便利な方法はありますか？divの周りにラッパーをMyClass追加し、シャドウの CSS をラッパーに追加できることはわかっていますが、それを行うためのより良い方法があるかどうか疑問に思っていました。

ありがとう。

4

2 に答える 2

8

すでに CSS3 セレクターの使用を試みたので、これは使用する正しい疑似クラスです。

.MyClass:last-of-type

CSS3 仕様(少なくとも私が理解している限り) によると、これは機能するはずですが、機能していないようです。少なくとも、最新の Chrome (v23) および Firefox (v17) ブラウザー バージョンにはありません。

警告:上の情報は機能せず、この問題に対する純粋な CSS ソリューションがあると誤解を招く可能性があります... CSS3 の時点では何もないためです。一方、CSS4 には、:nth-last-match(n)この正確なシナリオをカバーする追加の疑似クラスがあります。しかし、すべての CSS3 セレクターがブラウザーに実装されているわけではないことを言うのは時期尚早です。

追加調査

この疑似クラスセレクターが実際にどのように機能するかを示すJSFiddleを次に示します。

  1. CSS セレクターを満たすすべての要素を取得します (疑似なし)
  2. さまざまな HTML 要素タイプ (タグ) を取得する
  3. タイプ (タグ) グループごとに同じタイプ (タグ) のすべての兄弟要素を選択する
  4. 各タイプ (タグ) グループをグループ内の最後の要素に減らします
  5. この (各グループの) 残りの要素は、(疑似なしで) セレクターを満たしていますか?
  6. true の場合はスタイルを適用し、それ以外の場合は適用しません

これは、(私の例でも示されているように) いくつかの兄弟要素が、それらが異なる型である限り、このセレクターを満たすことができることを意味します。

これは、Chrome と Firefox で同じように機能するようです。そして、仕様を注意深く読むと、

:last-of-type疑似クラスは、親要素の子のリストで、その型の最後の兄弟である要素を表します。

それがセレクターを満足させた最後の兄弟であると言った場合、私の上の解決策は機能します。それでは、私のステップをテストしましょう。

HTML を使用して手順を実行する

  1. 最初の 3 つの要素を取得します
  2. 1 つのタイプのみ:div
  3. 4 つの要素 (最後の要素を含む)
  4. 最後の1つに減らす
  5. 満たす？いいえ
  6. スタイルを設定しない

私のフィドルの他のいくつかの例

この擬似クラス セレクターの動作をテストするために、さらに 2 つの例を追加しました。HTMLは次のとおりです。

<!-- First -->
<div class="SomeContainer">
    <div class="MyClass">Content</div>
    <div class="MyClass">Content</div> 
    <p class="MyClass">Content</p>
    <p class="MyClass">Content</p>
</div>

<!-- Second -->
<div class="SomeContainer">
    <div class="MyClass">Content</div>
    <div class="MyClass">Content</div>
    <div class="MyClass">Content</div>
    <p class="MyOtherClass">Content</p>
</div>

最初の 1 つで、2 つの要素がセレクター ( l​​astdivと last p) を満たします。
2 番目の要素では、1 つの要素がセレクターを満たします (last div)

結果

あなたが提供したHTMLを持ち、任意の数の要素が存在する可能性があると仮定すると.MyClass、特定のCSSクラスで最後の要素を実際にターゲットにする一般的なセレクターをCSS3に記述する方法はありません。

最善の方法は、特定のクラスを持つ最後の要素を表す要素に追加のクラスを追加し、それを対象とするセレクターを作成することです。

于 2012-11-22T17:44:11.547 に答える
1

last-of-typeは、最後の要素を他の要素と同じにしない場合にのみ役立つようです。ここでは、クラス名は関連性がないようです。この例では、2つの赤い正方形、1つは緑、もう1つは青を正しく示しています。


.SomeContainer > div, .SomeContainer > span { width: 20px; height: 20px; background: red}
.SomeContainer > div:last-of-type {background: green}
.SomeContainer > span:last-child {box-shadow:0px 5px 10px black; background: blue; display: block}

<div class="SomeContainer">
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <div class="MyClass"></div>
    <span class="MyOtherClass"></span>
</div>
于 2012-11-22T17:36:45.177 に答える