CSS ile 3 div'den ilkini nasıl hariç tutabilirim?

Merhabalar.

Yan yana gelen 3 sosyal medya butonu yaptım ve bunların arasına %1'lik boşluk bırakmak istedim. HTML ile ayrı ayrı isimler vermek yerine CSS ile ortak isme sahip 3 div class'ından ilkini hariç tutan bir CSS kodu nasıl yazabilirim?

Örnek:

<div class="social-button">Facebook</div>
<div class="social-button">Twitter</div>
<div class="social-button">Istagram</div>

Twitter ve Istagram için "margin-left: 1%;" eklemek istiyorum.

Not: last-child ile denedim ancak ne yanlış bilmiyorum ama sadece Istagram için geçerli CSS kodu yazabildim.
Şöyle:

.social-button:last-child {
  margin-left: 1%;
}

.social-button { margin-right:1%; }
.social-button:first-child { margin:0; } /* ilk class için * /
.social-button:last-child { margin:0; } /*  son class için  */
.social-button:nth-child(2) { margin:0; } /* ikinci class için */

edit bu daha kolay

social-button:not(:first-child){

}

.social-button:nth-child(n+2) {
margin-left: 1%;
}

.social-button:not(:first-child){

}

Kullanım mantığını anlattığınız için teşekkürler ancak :not ile yapmak benim için en doğrusu oldu. Yeni .social-button:not(:first-child)

boyle yaparak 1.yi haric tutarsin[/QUOTE]

.social-button:not(:first-child) ile yaptım oldu ancak ne dediğini anlayamadım.

Bu tam olarak ne demek?

Dediğiniz gibi yaptım sorun çözüldü, teşekkürler.

Yazdigim kod n+2 yani n 0 1 2 diye gider 2. elemandan baslatir. Deneyebilirsiniz, kod calisacaktir.

Teşekkürler, çok mantıklı bir çözüm günün birinde mutlaka işime yarayacaktır.