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>

Rozwiń fragment kodu

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

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

css css-selectors pseudo-element

— Matt Clarkson
źródło

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

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: '| ';
}

— imma
źródło

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

— Vivek
źródło

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.

— Liza Daly
źródło

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);
    }

— Lorena Pita
źródło

20

Dla mnie działa dobrze

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

— Ashad Nasim
źródło

1

Ta odpowiedź może dotyczyć raczej SCSS niż CSS.

— Chris Walsh,

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

— Martin Kunc
źródło

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ć

— Jaylukmann
źródło

-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

— Yashu Mittal
źródło

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