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

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

Odpowiedzi: