web-dev-qa-db-ja.com

CSS：not（：last-child）：セレクタの後

このようなスタイルの要素のリストがあります。

ul {
    list-style-type: none;
    text-align: center;
}

li {
    display: inline;
}

li:not(:last-child):after {
    content:' |';
}
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

One | Two | Three | Four | Five |の代わりにOne | Two | Three | Four | Fiveを出力します

最後の要素以外のすべてをCSSで選択する方法を知っている人はいますか？

:not()セレクタの定義を見ることができます ここ

csscss-selectorspseudo-element
298
Matt Clarkson

それがnotセレクタに問題があるなら、あなたはそれらすべてを設定し、最後のものを上書きすることができます。

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

またはあなたが前に使用することができれば、最後の子は必要ありません

li+li:before
{
  content: '| ';
}
384
imma

すべてが正しいようです。あなたが使用したものの代わりに次のcssセレクタを使用したいと思うかもしれません。

ul > li:not(:last-child):after
199
Vivek

あなたが書いた例は、Chrome 11でも完璧に動作します。おそらくあなたのブラウザは:not()セレクタをサポートしていませんか？

このクロスブラウザを実現するには、JavaScriptなどを使用する必要があります。 jQueryはセレクタAPIに ：not（） を実装しています。

25
Liza Daly

CSSを使った例

  ul li:not(:last-child){
        border-right: 1px solid rgba(153, 151, 151, 0.75);
    }
15
Lorena Pita

あなたのサンプルはIEではうまくいきません。content CSSプロパティを使うためにIEであなたのページを標準的な方法でレンダリングするためにあなたは Doctype header をドキュメントで指定しなければなりません：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

</html>

第2の方法はCSS 3セレクタを使うことです 

li:not(:last-of-type):after
{
    content:           " |";
}

しかし、あなたはまだDoctypeを指定する必要があります

そして3番目の方法は、次のようなスクリプトでJQueryを使用することです。 

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

<script type="text/javascript">
  $(document).ready(function () {
      $("li:not(:last)").append(" | ");
    });
</script>

3番目の方法の利点は、あなたがdoctypeを指定する必要がないということです、そしてjQueryは互換性の面倒を見ます。

10
Martin Kunc

私にとってはうまくいきます

&:not(:last-child){
            text-transform: uppercase;
        }
9
jsRook