web-dev-qa-db-ja.com

CSSの最後の子のセレクタ：特定のクラスの最後の要素を選択し、親の中にある最後の子を選択しませんか？

<div class="commentList">
   <article class="comment " id="com21"></article>
   <article class="comment " id="com20"></article>
   <article class="comment " id="com19"></article>
   <div class="something"> hello </div>
</div>

#com19を選択したいですか？

.comment {
    width:470px;
    border-bottom:1px dotted #f0f0f0;
    margin-bottom:10px;
}

.comment:last-child {
    border-bottom:none;
    margin-bottom:0;
}

CommentListに実際の最後の子として別のdiv.somethingがある限り、これは機能しません。この場合、最後の子セレクタを使用して、最後のarticle.commentを選択することは可能ですか？

jsFiddle

htmlcsscss3css-selectors
140
matt

:last-childは、問題の要素がコンテナの最後の子であり、特定の種類の要素の最後の子ではない場合にのみ機能します。そのためには、 :last-of-type が必要です

http://jsfiddle.net/C23g6/3/

@ BoltClockのコメントによると、これは最後のarticle要素のみをチェックし、.commentのクラスを持つ最後の要素はチェックしません。

html

<div class="commentList">
    <article class="comment " id="com21"></article>

    <article class="comment " id="com20"></article>

    <article class="comment " id="com19"></article>

    <div class="something"> hello </div>
</div>

cSS

body {
    background: black;
}

.comment {
    width:470px;
    border-bottom:1px dotted #f0f0f0;
    margin-bottom:10px;
}

.comment:last-of-type {
    border-bottom:none;
    margin-bottom:0;
}
204
Chris

あなたが要素を浮かせているならば、あなたは順序を逆にすることができます

すなわちfloat: right;の代わりにfloat: left;

そして、このメソッドを使ってクラスの最初の子を選択します。

/* 1: Apply style to ALL instances */
#header .some-class {
  padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
  padding-right: 20px;
}

これは実際にはLASTインスタンスにクラスを適用しているだけなので、逆の順序になっています。

これはあなたのための実用的な例です：

<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
  border: 1px solid red;
  padding-right: 0;
}
#header .some-class~.some-class {
  border: 0;
  padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
  <img src="some_image" title="Logo" class="lfloat no-border"/>
  <ul class="some-class rfloat">
    <li>List 1-1</li>
    <li>List 1-2</li>
    <li>List 1-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 2-1</li>
    <li>List 2-2</li>
    <li>List 2-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 3-1</li>
    <li>List 3-2</li>
    <li>List 3-3</li>
  </ul>
  <img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
6
Ozzy

最も正しい答えは、:nth-child（または、この特定の場合は、それに対応する:nth-last-child）を使用することです。ほとんどの人は、nを使った計算に基づいてある範囲の項目を取得するために、このセレクタを最初の引数で知っているだけですが、2番目の引数「of [any CSS selector]」も使えます。

あなたのシナリオはこのセレクターで解決することができます：.commentList .comment:nth-last-child(1 of .comment)

しかし、このセレクタは現在Safariにのみ実装されているため、技術的に正しいからといって使用できるわけではありません。

さらに読むために：

3
hurrtz

ここでコメントしておくべきだと思う何かが私のために働いた：

常に最後の最後を取得するように、必要な場所で:last-childを複数回使用します。

例を挙げましょう。

.page.one .page-container .comment:last-child {
  color: red;
}
.page.two .page-container:last-child .comment:last-child {
  color: blue;
}
<p> When you use .comment:last-child </p>
<p> you only get the last comment in both parents </p>

<div class="page one">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>

<p> When you use .page-container:last-child .comment:last-child </p>
<p> you get the last page-container's, last comment </p>

<div class="page two">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>
1
A Friend

この解決策はどうですか？

div.commentList > article.comment:not(:last-child):last-of-type
{
    color:red; /*or whatever...*/
}
0
lsblsb