CSS: değil (: son çocuk): seçiciden sonra

369

Ben böyle stil öğeleri, bir listesi var:

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>

Snippet'i genişlet

Herkes nasıl CSS son öğe dışında tümünü seçmek biliyor?

:not()Seçicinin tanımını burada görebilirsiniz

css css-selectors pseudo-element

— Matt Clarkson
kaynak

1

Bu davranış Chrome 10'da bir hata gibi görünüyor. Firefox 3.5'te benim için çalışıyor.

— duri

6

Aslında snippet'i 2018'de en son Chrome ile çalıştırdı ve beklendiği gibi çalıştı.

— atoth

433

Seçici ile ilgili bir sorun varsa, hepsini ayarlayabilir ve sonuncuyu geçersiz kılabilirsiniz

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

veya daha önce kullanabiliyorsanız, son çocuğa gerek yok

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

— Yapacağım
kaynak

12

Bu aslında geri IE8 kadar çalışmak için tek yolu (üzgünüm, IE7 ve öncesi için hiçbir cheetos). li:not(:first-child):beforeInternet Explorer'ın eski sürümlerinin üstesinden gelmek için biraz korkutucu.

— Sandy Gifford

240

Her şey doğru görünüyor. Kullandığınız şey yerine aşağıdaki css seçiciyi kullanmak isteyebilirsiniz.

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

— Vivek
kaynak

4

@ScottBeeson Bu, modern tarayıcı için en iyi uyarıcıdır, ancak eski tarayıcılarla kabul edilen cevap çalışmasıdır. (Sana katılıyorum, bu kabul edilen olmalı)

— Arthur

25

Yazdığınız örnek, Chrome 11'de benim için mükemmel çalışıyor. Belki de tarayıcınız :not()seçiciyi desteklemiyordur ?

Bu çapraz tarayıcıyı gerçekleştirmek için JavaScript veya benzeri bir şey kullanmanız gerekebilir. jQuery , selector API'sinde değil () uygular .

— Liza Daly
kaynak

8

Bunu daha li:not(:first-child):beforeönce dikey çubuğu ekleyerek ve ekleyerek çözdüm. Chrome'u son çocuğu desteklemeyen kararlı bir sürümle çalışıyordum. Kanarya inşa ediyor. Cevap için teşekkürler tho.

— Matt Clarkson

Chrome 2013'te bile desteklemiyor mu?

— MikkoP

20

CSS kullanan bir örnek

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

— Lorena Pita
kaynak

20

Benim için iyi çalışıyor

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

— Aşhad Nasım
kaynak

1

Bu cevap CSS yerine SCSS ile ilgili olabilir.

— Chris Walsh

10

Örneğiniz benim için IE'de çalışmıyor , sayfanızı IE'de içerik CSS özelliğini kullanmak için standart şekilde oluşturmak için belgenizde Doctype üstbilgisini belirtmeniz gerekiyor :

<!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>

İkinci yol CSS 3 seçicileri kullanmaktır

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

Ancak yine de Doctype'i belirtmeniz gerekiyor

Ve üçüncü yol JQuery aşağıdaki gibi bir komut dosyası ile kullanmaktır:

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

Üçüncü yolun avantajı, doküman türünü belirtmenize gerek olmamasıdır ve jQuery uyumluluğa dikkat edecektir.

— Martin Kunc
kaynak

6

<! DOCTYPE html> yeni HTML5 standardıdır.

— Matt Clarkson

1

Bu, bununla başa çıkmanın harika ve modern bir yoludur. Son çocukla mücadele ediyordum, sonra cevabını buldum. Bu mükemmel! : not (: türün son

— örneği

1

Son çocuktan önce ve: çocuktan sonra ve kullanılmış

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

Umarım, işe yaramalı

— Jaylukmann
kaynak

-2

Bunu deneyebilirsiniz, aradığınız cevaplar değil, konsept aynı.

Tüm çocuklar için stilleri ayarladığınız ve daha sonra son çocuktan kaldıracağınız yer.

Kod Parçacığı

li
  margin-right: 10px

  &:last-child
    margin-right: 0

görüntü

— Yashu Mittal
kaynak

2

Merhaba, lütfen bu düzenleyicinin ne olduğunu öğrenebilir miyim? Güzel görünüyor.

— Zanecat

Küçük bir kod parçasıdır ve herkes kolayca ezberleyebilir ve yazabilir.

— Yashu Mittal