CSS: not (: último filho): depois do seletor

370

Eu tenho uma lista de elementos, com o estilo desta forma:

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>

Expandir snippet

Alguém sabe como CSS selecionar tudo menos o último elemento?

Você pode ver a definição do :not()seletor aqui

css css-selectors pseudo-element Matt Clarkson
fonte

11

Esse comportamento parece ser um bug no Chrome 10. Ele funciona para mim no Firefox 3.5.

27411 duri

6

Na verdade, acabou de executar o snippet em 2018 com o Chrome mais recente e funcionou como esperado.

atoth 12/09/19

433

Se houver um problema com o seletor not, você poderá definir todos eles e substituir o último

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

ou se você pode usar antes, não há necessidade de filho último

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

imma
fonte

12

Esta é realmente a única maneira de fazê-lo funcionar desde o IE8 (desculpe, não há cheetos para o IE7 e versões anteriores). li:not(:first-child):beforeé um pouco assustador demais para as versões mais antigas do Internet Explorer.

22712 Sandy Gifford

240

Tudo parece correto. Você pode querer usar o seguinte seletor css em vez do que você usou.

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

Vivek
fonte

4

@ScottBeeson Este é o melhor awnser para navegadores modernos, mas a resposta aceita funciona com navegadores antigos. (Eu concordo com você, este deve ser o único aceito)

Arthur

25

Seu exemplo, como escrito, funciona perfeitamente no Chrome 11 para mim. Talvez o seu navegador simplesmente não suporte o :not()seletor?

Pode ser necessário usar JavaScript ou semelhante para realizar este navegador cruzado. O jQuery implementa : not () em sua API seletora.

Liza Daly
fonte

8

Eu resolvi isso fazendo li:not(:first-child):beforee adicionando a barra vertical antes. Eu estava trabalhando com a versão estável do Chrome, que parece não suportar o último filho. A construção Canary faz. Obrigado pela resposta tho.

Matt Clarkson

Parece que o Chrome não é compatível mesmo em 2013?

MikkoP

20

Um exemplo usando CSS

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

Lorena Pita
fonte

20

Para mim, funciona bem

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

Ashad Nasim
fonte

11

Esta resposta pode estar relacionada ao SCSS, e não ao CSS.

Chris Walsh

10

Seu exemplo não funciona no IE para mim; você precisa especificar o cabeçalho Doctype no seu documento para renderizar sua página de maneira padrão no IE para usar a propriedade CSS de conteúdo:

<!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 segunda maneira é usar seletores CSS 3

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

Mas você ainda precisa especificar Doctype

E a terceira maneira é usar o JQuery com algum script como o seguinte:

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

A vantagem da terceira maneira é que você não precisa especificar doctype e o jQuery cuidará da compatibilidade.

Martin Kunc
fonte

6

<! DOCTYPE html> é o novo padrão HTML5.

Matt Clarkson

11

Esta é uma maneira impressionante e moderna de lidar com isso. Eu estava lutando com: último filho, então encontrei sua resposta. Este é perfeito! : not (: last-of-type): depois

Firze 20/10

1

Remova o: before last-child e o: after e use

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

Felizmente, deve funcionar

Jaylukmann
fonte

-2

Você pode tentar isso, eu sei que não são as respostas que você está procurando, mas o conceito é o mesmo.

Onde você está definindo os estilos para todos os filhos e removendo-os do último filho.

Fragmento de código

li
  margin-right: 10px

  &:last-child
    margin-right: 0

Imagem

Yashu Mittal
fonte

2

Olá, posso saber o que é este editor, por favor? Parece legal.

Zanecat

É um pequeno pedaço de código e qualquer pessoa pode memorizá-lo e digitá-lo facilmente.

Yashu Mittal

CSS: not (: último filho): depois do seletor

Respostas: