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

Question

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

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>

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

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

score 466 · Accepted Answer

notセレクターに問題がある場合は、それらすべてを設定して、最後のセレクターをオーバーライドできます。

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

または、以前に使用できる場合は、最後の子は必要ありません

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

score 262 · Accepted Answer

すべてが正しいようです。使用したものの代わりに、次のcssセレクターを使用することをお勧めします。

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

score 31 · Accepted Answer

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

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

score 26 · Accepted Answer

書かれているあなたの例は、私にとってChrome11で完全に機能します。おそらくあなたのブラウザは:not()セレクターをサポートしていませんか？

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

score 21 · Accepted Answer

CSSを使用した例

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

score 10 · Accepted Answer

サンプルはIEでは機能しません。コンテンツCSSプロパティを使用するには、IEで標準的な方法でページをレンダリングするためにドキュメントでDoctypeヘッダーを指定する必要があります。

<!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番目の方法は、CSS3セレクターを使用することです

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が互換性を処理することです。

score 1 · Accepted Answer

：before last-childと：afterを削除して使用します

 ul li:not(last-child){
 content:' |';
}

うまくいけば、それはうまくいくはずです

score 0 · Accepted Answer

：before last-childと：afterを削除して使用します

ul > li:not(:last-child):after {
   border-bottom: none !important;
}

score -3 · Accepted Answer

あなたはこれを試すことができます、私はあなたが探している答えではないことを知っていますが、概念は同じです。

すべての子のスタイルを設定し、最後の子からスタイルを削除する場所。

コードスニペット

li
  margin-right: 10px

  &:last-child
    margin-right: 0

画像

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

9 に答える 9

Related

Reference