77

liCSSを使用してリストの最後の CSS 属性を変更する方法があるかどうか疑問に思っています。の使用を検討しまし:last-childたが、これは本当にバグがあるようで、うまく動作しません。必要に応じて JavaScript を使用しますが、CSS で解決策を考えられる人がいるかどうか知りたいです。

4

10 に答える 10

105

:last-childHTMLを変更せずにそれを行う唯一の方法です-しかし、それができると仮定すると、主なオプションはそれを与えることclass="last-item"です:

li.last-item { /* ... */ }

明らかに、選択した動的ページ生成言語でこれを自動化できます。また、lastChildW3C DOM には JavaScript プロパティがあります。

Prototypeで必要なことを行う例を次に示します。

$$("ul").each(function(x) { $(x.lastChild).addClassName("last-item"); });

またはもっと簡単に：

$$("ul li:last-child").each(function(x) { x.addClassName("last-item"); });

jQueryでは、さらにコンパクトに記述できます。

$("ul li:last-child").addClass("last-item");

また、これは実際の CSS セレクターを使用しなくても機能することに注意してくださいlast-child。むしろ、JavaScript の実装が使用されます。そのため、バグが少なく、ブラウザー間での信頼性が高くなるはずです。

于 2009-08-25T17:50:37.743 に答える
63

私は純粋な CSS でこれを行いました (おそらく、私は未来から来たためです - 他の誰よりも 3 年後 :P )

リストがあるとします：

<ul id="nav">
  <li><span>Category 1</span></li>
  <li><span>Category 2</span></li>
  <li><span>Category 3</span></li>
</ul>

次に、最後の項目のテキストを簡単に赤くすることができます:

ul#nav li:last-child span {
   color: Red;
}
于 2012-11-06T11:29:19.100 に答える
12

私は通常、CSS と JavaScript のアプローチを組み合わせて、IE6/7 を除くすべてのブラウザーで JavaScript なしで動作し、IE6/7 では JavaScript をオン (ただしオフではない) で動作させます。これらは:last-child疑似クラスをサポートしていないためです。

$("li:last-child").addClass("last-child");

li:last-child,li.last-child{ /* ... */ }
于 2009-08-25T17:58:07.930 に答える
7

IE7 +およびその他のブラウザの代替手段の1つは:first-child、代わりに使用して、スタイルを反転することです。

たとえば、それぞれにマージンを設定している場合li：

ul li {
  margin-bottom: 1em;
}
ul li:last-child {
  margin-bottom: 0;
}

これで置き換えることができます：

ul li {
  margin-top: 1em;
}
ul li:first-child {
  margin-top: 0;
}

これは、ボーダーのような他のいくつかのケースでうまく機能します。

サイトポイントによると、:first-childバグがありますが、一部のルート要素（doctypeまたはhtml）を選択する範囲でのみ、他の要素が挿入されてもスタイルが変更されない場合があります。

于 2009-08-26T11:37:46.140 に答える
3

私は通常、htc ファイル (例: last-child.htc) を作成してこれを行います。

<attach event="ondocumentready" handler="initializeBehaviours" />
<script type="text/javascript">
function initializeBehaviours() {
  this.lastChild.className += ' last-child';
}
</script>

そして、IE 条件付き css ファイルから次のように呼び出します。

ul { behavior: url("/javascripts/htc/last-child.htc"); }

私のメインのcssファイルでは、次のようになりました。

ul li:last-child,
ul li.last-child {
  /* some code */
}

.last-child クラスを定義せずに既存の css マークアップを使用する別のソリューション (遅いですが) は、Dean Edwards ie7.jsライブラリです。

于 2009-08-26T00:04:24.163 に答える
2

：last-childはCSS3であり、IEをサポートしていませんが、：first-childはCSS2ですが、jqueryを使用して実装する安全な方法は次のとおりです。

$('li').last().addClass('someClass');
于 2010-04-22T05:49:22.453 に答える
2

$('li').last().addClass('someClass');

複数ある場合

  • group は最後の li のみを選択します。

    • 于 2010-08-26T08:25:07.397 に答える
    0

    たとえば、リストに3つのliがあることがわかっている場合は、次のように実行できます。

    li + li + li { /* Selects third to last li */
}

    IE6では、次の式を使用できます。

    li {
    color: expression(this.previousSibling ? 'red' : 'green'); /* 'green' if last child */
}

    :last-childただし、セレクターのサポートが向上するまでは、特殊なクラスまたはJavascript（IE6式ではない）を使用することをお勧めします。

    于 2009-08-25T21:42:24.513 に答える