Float em repetição de class

[Nícolas Luís Huber 14]

Olá comunidade iMasters, estou criando um parte de um site, na qual a uma repetição de uma class. Essa class está com a propriedade float: left; e um margin para distanciá-la, mas quero distribui-la certinha para ocupar todo o espaço. Essa imagem ajuda ver melhor: http://i50.tinypic.com/j9ufsg.png.

 

Existe algum seletore que selecione o último filho de cada linha, ou que selecione a cada 2 filhos?

 

[pwd 7]

Não entendi muito, mas se for pra vc deixar os box, alinhado com slider de cima,tem um truque.

 

vc cria um div com mesmo tamanho do slider, e deixa com overflow hidden, depois cria uma div calculado o tamanho dos box + espaços essa div vai ultrapassar a div que esta em overflow hidden.

[Nícolas Luís Huber 14]

Eu gostaria de saber se existe algum seletor que faça uma permutação 2 a 2, ou seja:

 

 

 

<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>

 

 

Digamos que o código acima seja infinito, eu gostaria que a cada 2 <p> tivesse a cor vermelha, existe algum seletor??? Somente com Javascript será???

[Diéssica 140]

É possível sim, utilizando as pseudo classes do CSS2.1 ou do CSS3.

 

No caso de

<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>

aplicamos a pseudo classe :ntd-child() na tag p, p:ntd-child(3n) sendo 3n a expressão matemática (para esse caso) que imprimirá o resultado.

p:nth-child(3n) {
background:#FF0000;
}

Resultado: http://jsfiddle.net/yZsaE/

 

:seta: http://css-tricks.com/how-nth-child-works/

 

:seta: http://maujor.com/tutorial/sel-css3.php

:seta: http://maujor.com/tutorial/seletores_css21_parte1.php

:seta: http://maujor.com/tutorial/seletores_css21_parte2.php

:seta: http://maujor.com/tutorial/seletores_css21_parte3.php

 

 

[Nícolas Luís Huber 14]

Muito Obrigado! Eu havia visto já este seletor, mas não sabia que a sintaxe permitia 3n. Muito Obrigado mesmo!

 

 

Estou com uma dúvida a respeito do despenho. Através do método acima utilizando nth-child(3n) obtenho o mesmo efeito do que usar uma função javascritp:

 

 

 

<script>
	  window.onload = function() {
		var q = 3; // mudar de tanto em tanto
		var div = document.getElementsByClassName('small-container');
		for(i = 1; i <= div.length; i++) {
		if( i % q == 0 ) {
		div[i-1].className = 'small-container last';
		}		
	}
	}
	</script> 

 

Em desempenho, qual seria o mais veloz? Em CSS a utilização de pseudo-classes são mais lentas que seletores descendentes, certo? Existe alguma maneira, em termo de desempenho, alcance o mesmo resultado dos maneiras já citada, porém com outra estilização CSS?

 

Obviamente o desempenho em uma página pequena não seja percebida, mas digamos que seja um grande portal!

 

Resumidamente eu quero resolver um problema com meu site. Veja este print do problema. Como podes ver aquela class repetindo várias vezes é um listagem que irá vir de um banco de dados. Está com float: left e para poder afastar existe uma margin. Acontece que o 3º "elemento" de cada "linha" fica com margem também, então ele não fica centralizada com o tamanho da sessão acima. Como poderias projetar o CSS para ficar 100% alinhado, sendo a maneira mais rápida na árvores do DOM, melhor despenho.?

[André do Vale 76]

Prefira utilizar pelo CSS. Ao conhecer melhor os pseudo-seletores/classes/elementos, verá que são de grande valia. E convenhamos reescrever isto em JS é realmente desnecessário.

 

Recomendo o uso de um plugin ao estilo deste, para retrocompatibilidade: http://selectivizr.com/

 

Ah! Para o seu problema, você pode alcançar os elementos ainda com o ":nth-child()", mas usando uma expressão diferente:

 

 

.seletor:nth-child(3n + 1) {
/* aqui pegará o primeiro elemento, e os próximos múltiplos de três (ou, o primeiro de cada linha) */
}
.seletor:nth-child(3n + 2) {
/* aqui o elemento do meio de cada linha */
}
.seletor:nth-child(3n + 1) {
/* e, aqui, o último elemento de cada linha */
}