🥇 Enésima criança do pobre homem para LT IE 9

Como o LT IE 9 não oferece suporte ao enésimo filho sem Selectivzr (e o Selectivzr pode realmente desacelerar a renderização de uma página – especialmente no SharePoint), escrevi um mixin Sass para alcançar o enésimo filho do pobre homem , que usa o seletor de irmão +para replicar.

Ele suporta único (X), repetição (Xn), repetição a partir de um índice (Xn + Y / Xn-Y) e ímpar e par.

É tão simples quanto fazer algo como:

.nth > li:first-child {
    @include nth-child(3n, 'li', 20) {
        // style as required
    }
}

O mixin assume os seguintes parâmetros:

$an – o método de contagem, por exemplo: 2n, 3n, ímpar – o padrão é 2n
$an também pode ser uma lista, com o segundo parâmetro sendo o modificador, por exemplo: 2 para ($ an + 2) ou -3 para ($ an-3)
$sibling – o seletor de elemento irmão, por exemplo: ‘li’, ‘div’ – o padrão é ‘*’
$count – quantos seletores irmãos suportar, por exemplo: 10, 20 – o padrão é 15

Você pode ver um exemplo ao vivo no CodePen: http://codepen.io/stowball/pen/GxlIc
Pegue o código em minha essência: https://gist.github.com/stowball/5704507
Ou obtenha-o como parte da minha estrutura de IU do Sass, Suzi: https://github.com/izilla/Suzi/

Related Posts