web-dev-qa-db-ja.com

最後の<li>のCSSの変更

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

htmlcsscss-selectorshtml-lists
74
PF1

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

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

明らかに、選択した動的ページ生成言語でこれを自動化できます。また、W3C DOMには lastChild 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");

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

101
Lucas Jones

私は純粋な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;
}
50
pano

jQuery を使用して、そのような方法で実行できます

$("li:last-child").addClass("someClass");
9
Keith Adler

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;
}

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

sitepoint 、:first-child buggyによると、一部のルート要素（doctypeまたはhtml）を選択する範囲のみであり、他の要素が挿入されてもスタイルは変更されません。

6
DisgruntledGoat

2015 Answer： CSS last-of-type では、最後のアイテムのスタイルを設定できます。

ul li:last-of-type { color: red; }
4
mikemaccana

私は通常、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 libraryです。

3
vise

$（ 'li'）。last（）。addClass（ 'someClass'）;

複数ある場合

  • グループは最後のliのみを選択します。
    • 2
    jaeson

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

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

    探しているリストに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式ではない）を使用することをお勧めします。

    0
    strager