CSS:not(:last-child):セレクタの後


369

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

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()セレクタの定義を見ることができます


1
この動作はChrome 10のバグのようです。Firefox3.5では動作します。
duri

6
実際、2018年に最新のChromeでスニペットを実行しただけで、期待どおりに動作しました。
atoth

回答:


433

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

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

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

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

12
これが実際にIE8まで機能する唯一の方法です(申し訳ありませんが、IE7以前のチートはありません)。 li:not(:first-child):before古いバージョンのInternet Explorerで取り組むには少し怖いです。
Sandy Gifford、

240

すべてが正しいようです。使用したものではなく、次のcssセレクターを使用したい場合があります。

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

4
@ScottBeesonこれは、最新のブラウザに最適なオーナですが、古いブラウザでも動作することが認められています。(私はあなたに同意します、これは受け入れられるべきです)
Arthur

25

記述されている例は、Chrome 11で完全に機能します。おそらくあなたのブラウザは:not()セレクタをサポートしていませんか?

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


8
私はli:not(:first-child):before以前に縦棒を追加してこれを解決しました。私は、最後の子をサポートしていないように見える安定版のChromeを使用していました。Canaryビルドが行います。答えをありがとう。
Matt Clarkson

2013年でもChromeはChromeをサポートしていないようですか?
MikkoP 2013年



10

私の場合、サンプルは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番目の方法は、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が互換性を処理することです。


6
<!DOCTYPE html>は新しいHTML5標準です。
Matt Clarkson

1
これはこれに対処するための素晴らしい最新の方法です。私は:last-childと格闘していましたが、あなたの答えを見つけました。これは完璧です!:not(:last-of-type):after
Firze

1

:before last-childと:after and usedを削除します

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

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


-2

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

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

コードスニペット

li
  margin-right: 10px

  &:last-child
    margin-right: 0

画像

ここに画像の説明を入力してください


2
こんにちは、このエディタを教えてください。良い感じ。
Zanecat 2018

これは小さなコードであり、誰でも簡単に覚えて入力できます。
Yashu Mittal
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.