IE8: n-filho e: antes

Aqui está o meu CSS:

#nav-primary ul li:nth-child(1) a:after { } 

Funciona em todos os lugares agora (usado no meu site), exceto o Internet Explorer 8 …

Existe possivelmente uma maneira de usar o n-filho no IE8? Esta é a pior versão deste navegador … nada funciona como deveria e não consigo encontrar uma maneira de consertá-lo.

@edit: Versão simplificada do que eu quero alcançar: http://jsfiddle.net/LvvNL/ . É apenas um começo. CSS será mais complicado, então eu preciso ser capaz de apontar cada um desses links. Espero que adicionar classs a cada link não seja a única maneira

@ edit2: Acabei de perceber que

 #nav-primary ul li:nth-child(1) a { border-top: 5px solid #144201; } 

Está realmente trabalhando no IE8! Mas isso:

 #nav-primary ul li:nth-child(1) a:after { content: "Text"; display: block; font-weight: normal; padding-top: 5px; font-size: 12px; color: #666; } 

não está funcionando. Então, o que está acontecendo?

Você pode (ab) usar o combinador irmão adjacente ( + ) para conseguir isso com CSS que funciona no IE7 / 8.

Veja: http://jsfiddle.net/thirtydot/LvvNL/64/

 /* equivalent to li:nth-child(1) */ #nav-primary ul li:first-child a { border-top: 5px solid red; } /* equivalent to li:nth-child(2) */ #nav-primary ul li:first-child + li a { border-top: 5px solid blue; } /* equivalent to li:nth-child(3) */ #nav-primary ul li:first-child + li + li a { border-top: 5px solid green; }​ 

Você não pode emular variações mais complexas de :nth-child() como :nth-child(odd) ou :nth-child(4n+3) com este método.

IE9.js resolve este e outros problemas relacionados!

:nth-child(odd) e :nth-child(even) trabalham com isso.

Uso:

  

Tente emparelhar Selectivizr com o NMWatcher . Isso é o que faço em todos os meus sites para obter um bom pseudo seletor de suporte em todos os navegadores. FWIW se você estiver usando muitos elementos HTML5, então pode valer a pena usar v 1.2.3 do NMWatcher ao invés de 1.2.4, eu tive um problema selectivizr com um site hoje que eu não conseguia consertar, então eu mudei para 1.2.3 e funcionou bem.

IE8 (e abaixo) não suporta :nth-child() , mas suporta :after . No entanto, porque você está usando :nth-child() antes :after do seu seletor, o IE8 não o executará.

Você poderia usar uma solução JavaScript adicionando uma class a essa linha ou uma biblioteca que adiciona suporte a esses seletores.

Você pode usar: first-child em vez de: nth-child (1) isso tem melhor suporte no IE7 +

Veja também http://quirksmode.org/css/firstchild.html

ie9.js soa como a melhor solução, mas você também pode adicionar uma class às células, por exemplo

  stuffstuff