TL;DR: O seletor .media__bd--gretting h1{}
é mais rápido.
Digo que é mais rápido baseado em uma série de artigos que vou citar aqui, mas vale iniciar a minha resposta dizendo o quão complicada é a sua pergunta, e o quão difícil é acertar no pulo ao construir essa resposta. Nas palavras de David Hyatt, arquiteto do Safari e do Webkit:
The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance. Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers.
O que, basicamente, quer dizer que seletores CSS3 (que englobam o seu caso do :nth-child()
não devem ser usados, se o seu foco é performance. Essa quote foi retirada deste artigo, que data de 2009. Se você ler o artigo, vai ver que a conclusão foi de que esse tipo de otimização, quando realizada, resulta em pouco ganho de velocidade, e que a relação custo-benefício é praticamente nula. Se, em 2009, o ganho era pouco, imagine agora, em 2015, com a tecnologia como um todo muito mais eficiente.
Eu discuti, nessa resposta, sobre boas práticas de CSS. Um dos pontos foi sobre o bloating. Já dei manutenção em código onde cada elemento, por mais repetitivo que fosse, tinha a sua própria (e única), declaração. Um exemplo real disso é
.bloco1 {
float: left;
width: 33%;
line-height: 1.5;
}
.bloco2 {
float: left;
width: 33%;
line-height: 1.5;
}
e isso repetia-se por, acredite se quiser, 12 blocos, todos com as mesmas regras de estilo. O resultado final é um bloating de código enorme e, portanto, ineficiente. Neste caso, especificamente, era possível reduzir o CSS
para:
.bloco1, .bloco2{
.
.
.
}
o que já ajudaria a diminuir o tamanho do arquivo e o excesso de repetitividade no código. Em um mundo ideal, existiria uma classe chamada .bloco
, e o markup seria criado de acordo (o que não foi o caso). Nesse tipo de situação, você deixa de ter uma Cascade Style Sheet, e passa a ter uma Style Sheet, ignorando por completo uma das features mais poderosas quando se fala de estilização.
Esse exemplo ilustra que, o maior dos problemas de performance encontram-se não na profundidade da especificidade do seletor, mas sim em um escopo geral de o quão grande está a sua aplicação inteira, e o tempo de render que ela leva. Isso inclui a otimização de tudo, HTML
, CSS
e JS
.
Essa publicação (mais recente, de 2014), trás consigo uma série de testes que foram feitos em cima de performance de CSS
, e quais são as melhores (e piores) práticas. Uma leitura interessantíssima, que leva à uma série de conclusões bacanas, sendo duas delas:
sweating over the selectors used in modern browsers is futile; most selection methods are now so fast it’s really not worth spending much time over. Furthermore, there is disparity across browsers of what the slowest selectors are anyway. ...
e
the battle for high performing CSS will not be won in the selectors used, it will be won with the judicious use of property and values
O que, basicamente, quer dizer: Existem seletores mais rápidos que outros? Sim. Noites mal dormidas valem a pena por causa disso? Não. A batalha da velocidade será vencida através da inteligência usada na construção do seu CSS
(e da sua aplicação como um todo) e das propriedades usadas, e não nos milissegundos ganhos caso você use ou não um um pseudo-seletor.
nodes
você tem na página. É provável que comnth-child(1)
seja mais lento, mas é provável que também leve o mesmo tempo pra percepção dos microssegundos, a sem pseudo pode levar 1.5ms já a com pseudo pode levar 2.2ms por exemplo, é tão imperceptível que chega a ser um tipo de optimização que não compensa. No então vou lhe dar +1 na pergunta pois ainda sim é algo interessante.