Selecione todos os 'tr', exceto o primeiro

257

Como posso selecionar todos os trelementos, exceto o primeiro trde uma tabela com CSS?

Eu tentei usar esse método, mas achei que não funcionava.

css css-selectors

— Alexander Abakumov
fonte

1

Em quais navegadores isso precisa ser compatível?

— Pekka

w3schools.com/CSS/css_pseudo_classes.asp

— Badr Hari

A pergunta de @ Pekka é importante, porque não consigo pensar em nenhuma maneira de fazer isso usando CSS padrão que funcione com várias versões do IE. Se você precisar oferecer suporte ao IE, a única solução viável é uma classe para a primeira <tr>e uma classe diferente para o restante.

— Spudley

Eu não estou preocupado com o IE, mas ele vai trabalhar em FF e GC

466

Adicionando uma classe ao primeiro trou ao trs subsequente . Não existe uma maneira entre navegadores de selecionar as linhas que você deseja apenas com CSS.

No entanto, se você não se importa com o Internet Explorer 6, 7 ou 8:

tr:not(:first-child) {
    color: red;
}

— Magnar
fonte

18

Também gostaria de apontar tr:not(:first-of-type)como uma solução em potencial, se você está procurando a primeira instância de um seletor específico e não o primeiro filho generalizado.

— 21713 Joshua Burns #:

2

Eu acho que em 2019 terminamos o IE (menos de 0,5% dos usuários do IE6 para o IE10

— Webwoman

227

Estou surpreso que ninguém tenha mencionado o uso de combinadores de irmãos, suportados pelo IE7 e posterior:

tr + tr /* CSS2, adjacent sibling */
tr ~ tr /* CSS3, general sibling */

Ambos funcionam exatamente da mesma maneira (no mesmo contexto das tabelas HTML) como:

tr:not(:first-child)

— BoltClock
fonte

1

Espere ... como essa deve ser a resposta aceita? Você não pode obter "tudo menos o primeiro" dessa afirmação, que é o que o OP está pedindo. tr + tr você obterá um único elemento. Eu acho que tr ~ tr vai te tudo (acho que algo como parent: first-child ~ tr), mas não em sintaticamente como uma forma legível como não:

— hairbo

5

@hairbo: tr + tr recebe qualquer tr que segue diretamente outro tr. Se você possui uma tabela com três linhas, a terceira linha segue diretamente a segunda linha, portanto, ela também corresponderá. Você só receberá um único elemento se usar tr: first-child + tr. A única diferença entre + e ~ é que ~ permite qualquer número de outros elementos entre os dois mencionados.

— BoltClock

Só queria acrescentar, elem + elemé uma ótima solução geral para quando os elementos que você deseja segmentar não são os únicos filhos. Por exemplo, se a <h2>for seguido por várias <p>tags, o primeiro <p>não será o primeiro filho nesse caso.

— DisgruntledGoat

27

solução ideal, mas não suportada no IE

tr:not(:first-child) {css}

a segunda solução seria estilizar todos os trs e substituir o css pelo primeiro filho:

tr {css}
tr:first-child {override css above}

— Mark Steggles
fonte

10

parece que a 'primeira linha' da qual você está falando é o cabeçalho da tabela - então você deve realmente pensar em usar theade tbodyem sua marcação ( clique aqui ) o que resultaria em uma marcação 'melhor' (semanticamente correta, útil para itens como leitores de tela) ) e possibilidades mais fáceis e compatíveis com vários navegadores para seleção de css ( table thead ... { ... })

— oezi
fonte

3

Embora a pergunta já tenha uma resposta decente, só quero enfatizar que a :first-childtag segue o tipo de item que representa os filhos.

Por exemplo, no código:

<div id"someDiv">
     <input id="someInput1" /> 
     <input id="someInput2" />
     <input id="someInput2" />
</div

Se você deseja afetar apenas os dois segundos elementos com uma margem, mas não o primeiro, você faria:

#someDiv > input {
     margin-top: 20px;
}
#someDiv > input:first-child{
     margin-top: 0px;
}

isto é, como inputs são filhos, você colocaria first-childna parte de entrada do seletor.

— CodyBugstein
fonte

1

Desculpe, eu sei que isso é antigo, mas por que não estilizar todos os elementos tr da maneira que você deseja, exceto o primeiro e usar a classe psuedo: first-child, em que você revoga o que especificou para todos os elementos tr.

Melhor descrito por este exemplo:

http://jsfiddle.net/DWTr7/1/

tr {
    border-top: 1px solid;
}
tr:first-child {
    border-top: none;   
}

/ Patrik

— Patrik
fonte

1

Como tr:not(:first-child)não é suportado pelo IE 6, 7, 8. Você pode usar a ajuda do jQuery. Você pode encontrá-lo aqui

— Tapos
fonte

1

Outra opção:

tr:nth-child(n + 2) {
    /* properties */
}

— Arman Yeghiazaryan
fonte

0

Pode ser que alguém possa se beneficiar, abaixo está o que eu usei

ol li:not(:first-child) {
    background: black;
    color: white;
}

— Kokkonda Abhilash
fonte

-1

Você também pode usar um seletor de pseudo classe no seu CSS assim:

.desc:not(:first-child) {
    display: none;
}

Isso não aplicará a classe ao primeiro elemento da classe .desc.

Aqui está um JSFiddle com um exemplo: http://jsfiddle.net/YYTFT/ , e esta é uma boa fonte para explicar os seletores de pseudo classe: http://css-tricks.com/pseudo-class-selectors/

— James
fonte

1

Isso não aplicará o estilo ao primeiro elemento, ponto. first-childignora classes.

— Fez Vrasta

-3

Você pode criar uma classe e usá-la quando definir todos os seus futuros que deseja (ou não deseja) que sejam selecionados pelo CSS.

Isso seria feito escrevendo

<tr class="unselected">

e depois no seu css com as linhas (e usando o comando text-align como exemplo):

unselected {
  text-align:center;
}



selected {
  text-align:right;
}

— user476033
fonte

2

apelos entender a pergunta antes de responder

— Ammar Bozorgvar