CSS :not(:last-child):after selector CSS :not(:last-child):after (Programare, Css, Selectori Css, Pseudo Element)

Matt Clarkson a intrebat.

Am o listă de elemente, care sunt stilizate astfel:

Ieșiri One | Two | Three | Four | Five | în loc de One | Two | Three | Four | Five

Știe cineva cum să selecteze CSS toate elementele, mai puțin ultimul?

Puteți vedea definiția elementului :not() selector aici

Comentarii

  • Acest comportament pare să fie un bug în Chrome 10. La mine funcționează în Firefox 3.5. –  > Por duri.
  • De fapt, tocmai am rulat fragmentul în 2018 cu cel mai recent Chrome și a funcționat conform așteptărilor. –  > Por atoth.
8 răspunsuri
imma

Dacă este o problemă cu selectorul not, puteți să le setați pe toate și să le suprascrieți pe ultimul

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

sau dacă poți folosi before, nu este nevoie de last-child

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

Comentarii

  • Aceasta este de fapt singura modalitate de a o face să funcționeze până la IE8 (îmi pare rău, nu există cheetos pentru IE7 și mai devreme). li:not(:first-child):before este un pic prea înfricoșător pentru versiunile mai vechi ale Internet Explorer pentru a fi abordat. –  > Por Sandy Gifford.
Vivek

Toate lucrurile par corecte. S-ar putea să doriți să utilizați următorul selector css în loc de ceea ce ați folosit.

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

Comentarii

  • @ScottBeeson Acesta este cel mai bun awnser pentru browserul modern, dar răspunsul acceptat funcționează cu browsere vechi. (Sunt de acord cu tine, acesta ar trebui să fie cel acceptat) –  > Por Arthur.
Liza Daly

Exemplul tău, așa cum este scris, funcționează perfect în Chrome 11 pentru mine. Poate că browserul dvs. pur și simplu nu acceptă :not() selector?

Este posibil să trebuiască să folosiți JavaScript sau ceva similar pentru a realiza acest lucru între browsere. jQuery implementează :not() în API-ul său de selector.

Comentarii

  • Am rezolvat acest lucru făcând li:not(:first-child):before și adăugând bara verticală înainte. Am lucrat cu versiunea stabilă a Chrome care nu pare să suporte last-child. Construcția Canary o face. Mulțumesc pentru răspuns tho. –  > Por Matt Clarkson.
  • Se pare că Chrome nu îl acceptă nici măcar în 2013? –  > Por MikkoP.
Ashad Nasim

Pentru mine funcționează bine

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

Comentarii

  • Acest răspuns s-ar putea să se refere la SCSS mai degrabă decât la CSS. –  > Por Chris Walsh.
Lorena Pita

Un exemplu folosind CSS

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

Martin Kunc

Exemplul tău nu funcționează în IE pentru mine, trebuie să specifici Doctype header în documentul dvs. pentru a reda pagina în mod standard în IE pentru a utiliza proprietatea CSS de conținut:

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

A doua modalitate este de a utiliza selectori CSS 3

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

Dar tot trebuie să specificați Doctype

Și a treia modalitate este de a folosi JQuery cu un script ca următorul:

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

Avantajul celui de-al treilea mod este că nu trebuie să specificați doctype, iar jQuery se va ocupa de compatibilitate.

Comentarii

  • <!DOCTYPE html> este noul standard HTML5. –  > Por Matt Clarkson.
  • Acesta este un mod minunat și modern de a rezolva acest lucru. M-am luptat cu :last-child, apoi am găsit răspunsul tău. Acesta este perfect! :not(:last-of-type):after –  > Por Firze.
Jaylukmann

Îndepărtați : before last-child și :after și ați folosit

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

Să sperăm că va funcționa

Yashu Mittal

Puteți încerca acest lucru, știu că nu este răspunsul pe care îl căutați, dar conceptul este același.

În cazul în care setați stilurile pentru toți copiii și apoi le eliminați de la ultimul copil.

Fragment de cod

li
  margin-right: 10px

  &:last-child
    margin-right: 0

Imagine

Comentarii

  • Bună ziua, pot să știu ce este acest editor, vă rog? Arată bine. –  > Por Zanecat.
  • Este o bucată mică de cod și oricine îl poate memora și tasta cu ușurință. –  > Por Yashu Mittal.