CSS Pseudo-elements、「：after」、「：last-child」の組み合わせ

122

CSSを使用して「文法的に正しい」リストを作成したい。これは私がこれまでに持っているものです：

<li>タグは、それらの後、カンマで水平に表示されます。

li { display: inline; list-style-type: none; }

li:after { content: ", "; }

それは機能しますが、「最後の子」にコンマではなくピリオドを付けたいです。そして、できれば「最後の子」の前にも「と」を入れたい。私がスタイリングしているリストは動的に生成されるため、「最後の子」にクラスを与えることはできません。疑似要素を組み合わせることはできませんが、それが基本的に私が達成したい効果です。

li:last-child li:before { content: "and "; }

li:last-child li:after { content: "."; }

これを機能させるにはどうすればよいですか？

css

— デレク
ソース

4

これにはcssを使用すべきではありません。

— ファンキーな男

2

Funky Dudeに少し同意する必要があります。HTML（またはプレーンHTML以外の場合は分離コード）でこれを行うことをお勧めします。CSSはフォーマット用です:)

— Zyphrax 2010

16

私は...個人的には、リストでは、書式設定は良いことであり、必要ではないと主張する傾向があります。そのため、CSSを使用すると、HTMLやサーバー側のコーディングを使用するよりも簡単にリストに追加または削除できます。しかし、私はそのように奇妙なことがあります。時々、そして正直にymmvなどです... =）

— デビッドはモニカを

9

そして、オックスフォードカンマを使用するための+1！:)

— Brandon Rhodes

5

「+1 for Oxford Comma」。それについて聞いたことがない（私はネイティブではありません）。しかし、多くの言語で使用されていないため、すばやくWikiルックアップを行うのは自然なことです。スタックグーグルCSSの問題を学習できるのは面白いことです;）

— jakub.g

168

これは動作します:)（マルチブラウザ、Firefoxが気に入ってくれることを願っています）

li { display: inline; list-style-type: none; }
li:after { content: ", "; }
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }

<html>
  <body>
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </body>
</html>

スニペットを展開

— ジフラックス
ソース

2

同様の問題は、メニュー項目をパイプ文字で区切っている場合です。同じソリューションが機能します。ただし、最後のパイプ文字を削除するには、最後のコンテンツ属性を{content：none;}に設定する必要があります。

— aridlehoover

2

順序も重要です。li:last-child:after動作しますがli:after:last-child動作しません。

— Richard Ayotte、2011年

1

これは:last-childCSS3仕様に属していないため、IE8以前のバージョンではサポートされていません。

— クトゥルフ

23

<menu>要素のリスト項目については、これが好きです。次のマークアップを検討してください。

<menu>
  <li><a href="/member/profile">Profile</a></li>
  <li><a href="/member/options">Options</a></li>
  <li><a href="/member/logout">Logout</a></li>
</menu>

次のCSSでスタイルを設定します。

menu > li {
  display: inline;
}

menu > li::after {
  content: ' | ';
}

menu > li:last-child::after {
  content: '';
}

これは表示されます：

Profile | Options | Logout

そして、これはマーティン・アトキンスが彼のコメントで説明したもののために可能です

CSS 2 :afterでは、ではなくを使用することに注意してください::after。CSS 3を使用する場合::after、::afterは疑似要素であるため（2つのセミカラム）を使用します（1つのセミカラムは疑似クラス用です）。

— ガブリエル・オートクロック
ソース

16

古いスレッドですが、誰かがこれから恩恵を受けるかもしれません：

li:not(:last-child)::after { content: ","; }
li:last-child::after { content: "."; }

これはCSS3および[テストされていない] CSS2で機能するはずです。

— ユーザー5341733
ソース

11

疑似要素を組み合わせることができます！すみません、質問を投稿した直後に私はこれを自分で見つけました。多分それは互換性の問題のためにあまり一般的に使用されていません。

li:last-child:before { content: "and "; }

li:last-child:after { content: "."; }

これは水泳で動作します。CSSはちょっと素晴らしいです。

— デレク
ソース

12

これは少し「nit-picker's corner」ですが、「last-child」は実際には疑似クラスであり、「before」と「after」は疑似要素です。違いは、疑似クラスは既存の要素に対する追加の制約であるのに対して、疑似要素は実質的に、HTMLではなくCSSで生成されたプレゼンテーションツリーのまったく新しい要素です。このため、これらを組み合わせることができます。last-childはの修飾子でありli、li最後の子であるすべての要素を選択した後、それぞれの前と後に新しい要素を選択（および暗黙的に作成）します。

— Martin Atkins、

おそらくこの特定のスレッドを長い間忘れていたと思いますが、リストが可変長であると述べたので、ほとんどのコンテキストでは、ちょうど2つのアイテムを含むリストは英語のコンマでは正しくないことを指摘する価値があります。つまり「パンとバター」が欲しかったら。「パンとバター」ではなく -次に、ここで提供されるソリューションのほとんどは不完全です。私はそれを回避する方法を思いついたので、これを答えとして以下に投稿しました。

— Matt Wagner

6

ちなみに、CSS 3

：後

このように使用する必要があります

::後

https://developer.mozilla.org/de/docs/Web/CSS/::afterから：

:: after表記は、疑似クラスと疑似要素の区別を確立するために、CSS 3で導入されました。ブラウザは、CSS 2で導入された：afterの表記も受け入れます。

だからそれはする必要があります：

li { display: inline; list-style-type: none; }
li::after { content: ", "; }
li:last-child::before { content: "and "; }
li:last-child::after { content: "."; }

— ヴォルフガングブレッセン
ソース

3

ダブルコロン::CSS3構文をサポートするすべてのブラウザーも:構文のみをサポートしますが、IE 8はシングルコロンのみをサポートするため、現時点では、最良のブラウザーサポートのためにシングルコロンのみを使用することをお勧めします。::疑似コンテンツと疑似セレクタを区別するためにインデントされた新しい形式です。IE 8のサポートが不要な場合は、ダブルコロンを自由に使用してください。このことから記事

— JohnnyQ

2

IE 8は、ブラウザー標準の観点からはもはやプレーヤーではありません。マイクロソフトではサポートされておらず、HTML5またはCSS3（疑似要素、変換など）をサポートしていません。以前は1年前まで、IE6 / IE7まで遡って多くの作業を行っていました。 Modernizr。）私たちは長い道のりを歩んできました。サイトがオンラインIDを長期的に提示するつもりなら-それが近視眼的なソリューションになることなく-単にIE8を使用している誰かから得られる収益を考えてください。なだ。時代遅れの20年前の高齢者でさえ、現在タブレットと2-in-1ラップトップを使用しています。

— Steven Ventimiglia

2

この質問に別の回答を追加します。これは、@ derekが求めていることを正確に必要としていたため、ここで回答を見る前に、もう少し先に進んでいたためです。具体的には、カンマが不要なリストアイテムが2つだけあるケースにも対応できるCSSが必要でした。例として、私が作成したいいくつかの著者の署名欄は次のようになります。

一人の著者： By Adam Smith.

2人の著者： By Adam Smith and Jane Doe.

3人の著者： By Adam Smith, Jane Doe, and Frank Underwood.

ここですでに示した解決策は、1人の著者と3人以上の著者に対して機能しますが、2人の著者の場合を考慮に入れないでください。 -つまり、接続詞の前にコンマがあってはなりません。

いじくり回した午後の後、私は次のことを思いつきました：

<html>
 <head>
  <style type="text/css">
    .byline-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .byline-list > li {
      display: inline;
      padding: 0;
      margin: 0;
    }
    .byline-list > li::before {
      content: ", ";
    }
    .byline-list > li:last-child::before {
      content: ", and ";
    }
    .byline-list > li:first-child + li:last-child::before {
      content: " and ";
    }
    .byline-list > li:first-child::before {
      content: "By ";
    }
    .byline-list > li:last-child::after {
      content: ".";
    }
  </style>
 </head>
 <body>
  <ul class="byline-list">
   <li>Adam Smith</li>
  </ul>
  <ul class="byline-list">
   <li>Adam Smith</li><li>Jane Doe</li>
  </ul>
  <ul class="byline-list">
   <li>Adam Smith</li><li>Jane Doe</li><li>Frank Underwood</li>
  </ul>
 </body>
</html>

上に書いた通り、署名欄が表示されます。

最後に、li煩わしさを回避するために、要素間の空白もすべて削除する必要がありました。そうしないと、inline-blockプロパティは、各カンマの前にスペースを残します。おそらく代替のまともなハックがあるでしょうが、それはこの質問の主題ではないので、他の誰かが答えるようにしておきます。

ここでフィドル：http : //jsfiddle.net/5REP2/

— マット・ワーグナー
ソース

2

One、2、3のようなものを作成するには、 CSSスタイルをもう1つ追加する必要があります

li:nth-last-child(2):after {
    content: ' ';
}

これにより、2番目の最後の要素からコンマが削除されます。

完全なコード

li {
  display: inline;
  list-style-type: none;
}

li:after {
  content: ", ";
}

li:nth-last-child(2):after {
  content: '';
}

li:last-child:before {
  content: " and ";
}

li:last-child:after {
  content: ".";
}

<html>

<body>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</body>

</html>

スニペットを展開

— ラージシャルマ
ソース

0

私はメディアクエリで同じテクニックを使用しています。これは、スペースを節約するために、小さいデバイスで箇条書きリストをインラインリストに効果的に変換します。

だからからの変更：

リスト項目1
リスト項目2
リスト項目3

に：

リストアイテム1; リストアイテム2; リストアイテム3。

— ユーザー3064058
ソース

彼はこれをCSSで実現しようとしています。メソッドはハードコードされたHTMLです。このメソッドは通常、ナビゲーションを表示するために使用されます。

— Sparatan117 2014