Seletor de último filho CSS: seleciona o último elemento de uma classe específica, não o último filho dentro do pai?

175

<div class="commentList">
   <article class="comment " id="com21"></article>
   <article class="comment " id="com20"></article>
   <article class="comment " id="com19"></article>
   <div class="something"> hello </div>
</div>

Eu quero selecionar #com19?

.comment {
    width:470px;
    border-bottom:1px dotted #f0f0f0;
    margin-bottom:10px;
}

.comment:last-child {
    border-bottom:none;
    margin-bottom:0;
}

Isso não funciona, desde que eu tenha outro div.somethingúltimo filho real na commentList. É possível usar o seletor de último filho neste caso para selecionar a última aparência de article.comment?

jsFiddle

html css css-selectors mate
fonte

228

:last-childsó funciona quando o elemento em questão é o último filho do contêiner, não o último de um tipo específico de elemento. Para isso você quer:last-of-type

http://jsfiddle.net/C23g6/3/

De acordo com o comentário do @ BoltClock, isso está apenas checando o último articleelemento, não o último elemento da classe de .comment.

body {
  background: black;
}

.comment {
  width: 470px;
  border-bottom: 1px dotted #f0f0f0;
  margin-bottom: 10px;
}

.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

<div class="commentList">
  <article class="comment " id="com21"></article>

  <article class="comment " id="com20"></article>

  <article class="comment " id="com19"></article>

  <div class="something"> hello </div>
</div>

Expandir snippet

Chris
fonte

146

Porém, ele não olha para a turma, apenas o tipo; portanto, se você tiver não-artigos com a mesma turma, obterá resultados inesperados.

BoltClock

1

Funciona corretamente. No entanto, se precisarmos deles para restringir os elementos por classe, ele não funcionará novamente. jsfiddle.net/aliemreeee/a4H7f/2

Ali Emre Çakmakoğlu

12

com base nessas respostas, presumo que não há como selecionar last-of-class.

precisa saber é o seguinte

14

até que os seletores CSS de nível 4 sejam aceitos e implementados pelos navegadores, onde você terá acesso :nth-match(selector)e :nth-last-match(selector). Veja w3.org/TR/selectors4 para mais detalhes.

Chris

1

Ou melhor, :nth-last-child(An+B of selector)como :nth-last-match()foi descartado muito antes disso, mas eles não se preocuparam em atualizar o WD. Veja stackoverflow.com/questions/21167159/css-nth-match-doesnt-work/…

BoltClock

6

Se você está flutuando os elementos, pode reverter a ordem

ou seja, em float: right;vez defloat: left;

E, em seguida, use esse método para selecionar o primeiro filho de uma classe.

/* 1: Apply style to ALL instances */
#header .some-class {
  padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
  padding-right: 20px;
}

Na verdade, isso está aplicando a classe à instância LAST apenas porque agora está em ordem inversa.

Aqui está um exemplo de trabalho para você:

<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
  border: 1px solid red;
  padding-right: 0;
}
#header .some-class~.some-class {
  border: 0;
  padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
  <img src="some_image" title="Logo" class="lfloat no-border"/>
  <ul class="some-class rfloat">
    <li>List 1-1</li>
    <li>List 1-2</li>
    <li>List 1-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 2-1</li>
    <li>List 2-2</li>
    <li>List 2-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 3-1</li>
    <li>List 3-2</li>
    <li>List 3-3</li>
  </ul>
  <img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>

Ozzy
fonte

Nota embora isso não vai funcionar se os elementos flutuantes são empurrados para a próxima linha (espaço horizontal ou seja, não o suficiente para flutuar-direita / esquerda)

Ozzy

.some-class~.some-classfunciona muito bem para mim quando apenas 2 elementos se repetem.

Meloman

4

Acho que a resposta mais correta é: Use :nth-child(ou, nesse caso específico, sua contraparte :nth-last-child). A maioria conhece apenas esse seletor pelo seu primeiro argumento para pegar um intervalo de itens com base em um cálculo com n, mas também pode usar um segundo argumento "de [qualquer seletor de CSS]".

Seu cenário pode ser resolvido com este seletor: .commentList .comment:nth-last-child(1 of .comment)

Porém, estar tecnicamente correto não significa que você possa usá-lo, porque esse seletor agora está implementado apenas no Safari.

Para leitura adicional:

hurrtz
fonte

1

Algo que eu acho que deveria ser comentado aqui que funcionou para mim:

Use :last-childvárias vezes nos locais necessários para que ele sempre seja o último dos últimos.

Veja isso por exemplo:

.page.one .page-container .comment:last-child {
  color: red;
}
.page.two .page-container:last-child .comment:last-child {
  color: blue;
}

<p> When you use .comment:last-child </p>
<p> you only get the last comment in both parents </p>

<div class="page one">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>

<p> When you use .page-container:last-child .comment:last-child </p>
<p> you get the last page-container's, last comment </p>

<div class="page two">
  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>

  <div class="page-container">
    <p class="comment"> Something </p>
    <p class="comment"> Something </p>
  </div>
</div>

Expandir snippet

Um amigo
fonte

0

E essa solução?

div.commentList > article.comment:not(:last-child):last-of-type
{
    color:red; /*or whatever...*/
}

lsblsb
fonte

@lsblsb, você usa articleaqui, então: not (: last-child) não é necessário para um determinado exemplo.

Евгений Масленков

e se o elemento com classe somethingnão existir no HTML original e estiver sendo inserido dinamicamente hover? Esta solução não irá falhar?

Fr0zenFyr

-1

se o último tipo de elemento também for artigo, last-of-typenão funcionará conforme o esperado.

talvez eu realmente não entenda como isso funciona.

demonstração

Allen
fonte

Seletor de último filho CSS: seleciona o último elemento de uma classe específica, não o último filho dentro do pai?

Respostas: