web-dev-qa-db-ja.com

divクラスの最後の子

私はいくつかのWordpress Webページを仕上げています。CSSページのエントリのロールを（Postsで）スタイル設定したいと思います。Wordpressこれを作成します：

<div class="entry">

ページにはこれらの要素がたくさんあります。それらを分離するために、エントリの下部にあるボーダーを使用しました。問題は、最後のエントリにこの境界線が必要ないことです。 CSSで行われるようなことは何ですか？ （リストではないため、疑似クラスを使用できないことに注意してください）

ここに私のCSSがあります、それはかなり簡単です：

.entry{  border-bottom: 1px solid yellow; }

HTML：

<div id="wrapper">
  <br />
  there are loads of code
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  another huge code
  <br />
</div>

よろしくお願いします。

htmlcsswordpresscss-selectors
10
Tom11

あなたが探しているものにすでに名前を付けました：_last-child_： http://reference.sitepoint.com/css/pseudoclass-lastchild

したがって、.entry:not(:last-child) { border-bottom: 1px solid yellow; }を使用します

リストではないため、疑似クラスを使用できないことに注意してください）

JSYK、疑似クラスは、リストである包含要素に依存しません。最後の_.entry_要素が実際にはそのコンテナの最後の子ではないことを意味した場合でも、それを選択できる可能性があります。しかし、実際のマークアップがどのように見えるかを私に示さない限り、私はどのように説明することができません。

最後の_div.entry_の後に他のdivがない場合、セレクター.entry:not(:last-of-type)が機能します。

13
tuff
.entry:last-child {
  border-bottom: none;
}

リスト<li>にリンク<a>が含まれていて、<a>の最後の<li>を取得したいとします。ただ使用する：

.entry:last-child a {
  border-bottom: none;
}

これにより、.entryの最後が選択され、そのリンクがターゲットになります

6
JimmyRare

かなりシンプルなソリューション：

#wrapper :last-child
{
    border:none;
}
4
Ishwor

最も包括的なブラウザサポートのために、これを使用することをお勧めします。

.entry { border-bottom: 1px solid yellow; }
.entry:last-child { border-bottom: 0; }
1
Kevin Boucher