CSS: not (: last-child): po selektorze


369

Mam listę elementów, które są stylizowane w następujący sposób:

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>

Wyjścia One | Two | Three | Four | Five |zamiastOne | Two | Three | Four | Five

Czy ktoś wie, jak CSS wybrać wszystkie oprócz ostatniego elementu?

Możesz zobaczyć definicję :not()selektora tutaj


1
To zachowanie wydaje się być błędem w Chrome 10. Działa to dla mnie w przeglądarce Firefox 3.5.
duri

6
Właśnie uruchomiłem ten fragment w 2018 roku z najnowszym Chrome i działał zgodnie z oczekiwaniami.
atoth

Odpowiedzi:


433

Jeśli to problem z selektorem nie, możesz ustawić je wszystkie i zastąpić ostatni

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

lub jeśli możesz użyć wcześniej, nie potrzebujesz ostatniego dziecka

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

12
Jest to właściwie jedyny sposób, aby działał już w IE8 (przepraszam, brak cheetos dla IE7 i wcześniejszych). li:not(:first-child):beforejest trochę zbyt przerażające, aby poradzić sobie ze starszymi wersjami Internet Explorera.
Sandy Gifford

240

Każda rzecz wydaje się poprawna. Możesz użyć następującego selektora css zamiast tego, którego użyłeś.

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

4
@ScottBeeson Jest to najlepsza przeglądarka dla nowoczesnej przeglądarki, ale zaakceptowana odpowiedź działa ze starymi przeglądarkami. (Zgadzam się z tobą, to powinna być ta przyjęta)
Arthur

25

Twój przykład w formie pisemnej działa dla mnie idealnie w Chrome 11. Być może Twoja przeglądarka po prostu nie obsługuje :not()selektora?

Może być konieczne użycie JavaScript lub podobnego narzędzia w celu uzyskania dostępu do tej przeglądarki. jQuery implementuje : not () w swoim API selektora.


8
Rozwiązałem to, robiąc li:not(:first-child):beforei dodając wcześniej pionowy pasek. Pracowałem ze stabilną wersją Chrome, która nie obsługuje ostatniego dziecka. Wersja Canary ma. Dziękuję za odpowiedź.
Matt Clarkson

Wygląda na to, że Chrome nie obsługuje go nawet w 2013 roku?
MikkoP

20

Przykład z użyciem CSS

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


10

Twoja próbka nie działa w IE dla mnie, musisz podać nagłówek Doctype w dokumencie, aby renderować stronę w standardowy sposób w IE, aby użyć właściwości CSS treści:

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

Drugi sposób to użycie selektorów CSS 3

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

Ale nadal musisz określić Doctype

Trzecim sposobem jest użycie JQuery z niektórymi skryptami, takimi jak:

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

Zaletą trzeciego sposobu jest to, że nie musisz określać doctype, a jQuery zajmie się kompatybilnością.


6
<! DOCTYPE html> to nowy standard HTML5.
Matt Clarkson

1
To niesamowity i nowoczesny sposób na poradzenie sobie z tym. Walczyłem z: ostatnim dzieckiem, wtedy znalazłem twoją odpowiedź. Ten jest idealny! : not (: last-of-type): after
Firze

1

Usuń: przed ostatnim dzieckiem i: po i używane

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

Mam nadzieję, że powinno działać


-2

Możesz tego spróbować, wiem, że nie szukasz odpowiedzi, ale koncepcja jest taka sama.

Gdzie ustawiasz style dla wszystkich dzieci, a następnie usuwasz je z ostatniego dziecka.

Fragment kodu

li
  margin-right: 10px

  &:last-child
    margin-right: 0

Wizerunek

wprowadź opis zdjęcia tutaj


2
Cześć, czy mogę wiedzieć, co to jest ten edytor? Wygląda ładnie.
Zanecat

Jest to niewielki fragment kodu i każdy może go łatwo zapamiętać i wpisać.
Yashu Mittal
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.