15

画像ギャラリー用の単純な HTML に取り組んでいます。ギャラリーの各行には、2、3、または 4 つの画像を含めることができます。(2 つの画像の行では、各画像要素には という名前が付けられtype-2、同じことがtype-3およびにも当てはまりtype-4ます。)

ここで、各行の最後の要素を選択して、カスタム マージンを設定したいと考えています。私のHTMLは次のようなものです：

<div id="content">
    <div class="type-2"></div>
    <div class="type-2"></div> <!-- I want this, 2n+0 of type-2 -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-3"></div> <!-- this, 3n+0 of type-3 -->
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- this, 4n+0 of type-4 -->
    <div class="type-2"></div>
    <div class="type-2"></div> <!-- this -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-3"></div> <!-- this -->
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- this -->
</div>

次の CSS は機能すると思いますが、機能しませんでした。

.type-2:nth-of-type(2n+0) {margin-right:0;}
.type-3:nth-of-type(3n+0) {margin-right:0;}
.type-4:nth-of-type(4n+0) {margin-right:0;}

この CSS が選択するものは次のとおりです。

<div id="content">
    <div class="type-2"></div>
    <div class="type-2"></div> <!-- selected by .type-2:nth-of-type(2n+0) -->
    <div class="type-3"></div> <!-- selected by .type-3:nth-of-type(3n+0) -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- selected by .type-4:nth-of-type(4n+0) -->
    <div class="type-4"></div>
    <div class="type-2"></div> <!-- selected by .type-2:nth-of-type(2n+0) -->
    <div class="type-2"></div>
    <div class="type-3"></div> <!-- selected by .type-3:nth-of-type(3n+0) -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- selected by .type-4:nth-of-type(4n+0) -->
    <div class="type-4"></div>
    <div class="type-4"></div>
</div>

HTML を編集して目的を達成することはできますが、好奇心から、このための CSS はありますか?

編集：この質問は、要素ではなくクラスに適用できるかどうかnth-childを尋ねる質問の複製のように見えるかもしれません。nth-of-type私はすでに答えがノーであることを知っていました。私が本当に求めているのは、それに対する純粋な CSS ソリューション/ハックであり、選択された答えはまさにそれを行いました。

4

4 に答える 4

15

これは、CSS セレクター レベル 3 ではできません (少なくとも、CSS ハック、余分なマークアップ、または JavaScript がなければ)。

ドラフト CSS セレクター レベル 4 は、:nth-match()あなたが望むことを行う疑似クラスを提案しています。

:nth-match(2n+0 of .type-2) {margin-right:0;}
:nth-match(3n+0 of .type-3) {margin-right:0;}
:nth-match(4n+0 of .type-4) {margin-right:0;}

これは、私が知っているどのブラウザにもまだ実装されていませんが、Chrome に実装するためのバグが報告されています。

于 2013-10-19T17:51:06.627 に答える
10

CSS ハックだけで、マークアップを変更せずに、次のようなことができます。

[class*=' type-'], [type^='type-']{ /* Set all the divs to float: left initially */
    float: left;
    content: url('http://static.adzerk.net/Advertisers/db5df4870e4e4b6cbf42727fd434701a.jpg');
    height: 100px; width: 100px;
}

.type-2 + .type-2 + div{
    clear: both; /* Clear float for a div which follows two div with class type-2 */
}

.type-3 + .type-3 + .type-3 + div {
    clear: both; /* Clear float for a div which follows three div with class type-3 */
}

.type-4 + .type-4 + .type-4 + .type-4 + div {
    clear: both; /* /* Clear float for a div which follows four div with class type-4 */
}

デモフィドル

于 2013-10-19T17:31:59.430 に答える
7

nth-childとnth-of-typeは疑似クラスであり、要素にのみ適用できます。

.layout:nth-of-typeクラスの疑似クラスであるため、機能しません。

Jquery の EQ が解決策を提供する可能性があります

http://api.jquery.com/eq/

于 2013-10-19T17:09:25.637 に答える
3

簡潔な答え

純粋な css で求めていることを実行する方法はありません。

どうして

:nth-of-type次のような要素セレクターに対してのみ使用できます。

div:nth-of-type(2n+0) { margin-right: 0; }

参照リンク.

可能なJSソリューション

ただし、いくつかのjQueryで運を試すことができます：

var $this;

$('[class^="type-"]').each(function (){

  $this = $(this);

  if ( $this.attr('class') !== $this.next().attr('class') )
    $this.addClass('last');

});

次に.type-2.last、「タイプの最後の行」にアクセスするために使用します。

デモ

Heres a demo.

于 2013-10-19T17:22:38.177 に答える