Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
lostyazilim
tr.link

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

 8 Mesajlar 2.226 Okunma
lstbozum
tr.link

#1
MuratDinc MuratDinc Miyavliyo - WiseKitten Kullanıcı
  • Üyelik 01.11.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Girişimci
  • Konum Balıkesir
  • Ad Soyad M** D**
  • Mesajlar 1583
  • Beğeniler 207 / 257
  • Ticaret 5, (%100)
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:






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%;
}
 

 

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻
wmaraci
reklam

#2
dlkrnugur dlkrnugur JS Coder Kullanıcı
  • Üyelik 20.11.2011
  • Yaş/Cinsiyet 28 / E
  • Meslek PHP Coder
  • Konum Muğla
  • Ad Soyad U** D**
  • Mesajlar 1069
  • Beğeniler 210 / 209
  • Ticaret 41, (%98)
.social-button{margin-left:1%}
.social-button:first-child{margin-left:0%}
 

 

#3
wpuzman wpuzman WordPress Developer Kullanıcı
  • Üyelik 13.01.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Yazılım
  • Konum Trabzon
  • Ad Soyad B** M**
  • Mesajlar 2771
  • Beğeniler 293 / 949
  • Ticaret 33, (%100)
:not kullanarak tek işlemle yapabilirsiniz.
http://jsfiddle.net/1f8ksa7q/
dlkrnugur MuratDinc

kişi bu mesajı beğendi.

Udemy Wordpress Tema Yapımı Kursum

#4
MuratDinc MuratDinc Miyavliyo - WiseKitten Kullanıcı
  • Üyelik 01.11.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Girişimci
  • Konum Balıkesir
  • Ad Soyad M** D**
  • Mesajlar 1583
  • Beğeniler 207 / 257
  • Ticaret 5, (%100)

dlkrnugur adlı üyeden alıntı

.social-button{margin-left:1%}
.social-button:first-child{margin-left:0%}


Diğer mantık ile yazmak mümkün mü peki? Daha az kod satırı oluşturmak adına soruyorum.
 

 

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻
wmaraci
wmaraci

#5
91604 91604 WM Aracı Anonim Üyelik
  • Üyelik 02.06.2018
  • Yaş/Cinsiyet - /
  • Meslek
  • Konum
  • Ad Soyad ** **
  • Mesajlar 41
  • Beğeniler 4 / 20
  • Ticaret 7, (%100)
son iki div için class ekleyip onlara özel margin verebilirsiniz.

Yada sosyal linkleri "i" elementi ile oluşturup bir div içerisine alıp, hepsi için left-right margin değeri verebilirsiniz.Böyle daha kullanışlı olur.
 

 

#6
MuratDinc MuratDinc Miyavliyo - WiseKitten Kullanıcı
  • Üyelik 01.11.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Girişimci
  • Konum Balıkesir
  • Ad Soyad M** D**
  • Mesajlar 1583
  • Beğeniler 207 / 257
  • Ticaret 5, (%100)

bilimokur adlı üyeden alıntı

:not kullanarak tek işlemle yapabilirsiniz.
http://jsfiddle.net/1f8ksa7q/


İşe budur, teşekkürler bu şekilde oldukça iyi oldu. :not özelliğini desteklemeyen tarayıcılardan trafik alıyor muyumdur acaba? Çok yeni bir özellik değildir umarım.

dnapick adlı üyeden alıntı

son iki div için class ekleyip onlara özel margin verebilirsiniz.

Yada sosyal linkleri "i" elementi ile oluşturup bir div içerisine alıp, hepsi için left-right margin değeri verebilirsiniz.Böyle daha kullanışlı olur.


html içerisine css eklemek pek sağlıklı olmuyor, bu nedenle pek tercih etmiyorum. :not özelliği işimi gördü.
 

 

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻

#7
wpuzman wpuzman WordPress Developer Kullanıcı
  • Üyelik 13.01.2017
  • Yaş/Cinsiyet 33 / E
  • Meslek Yazılım
  • Konum Trabzon
  • Ad Soyad B** M**
  • Mesajlar 2771
  • Beğeniler 293 / 949
  • Ticaret 33, (%100)
Tarayıcılar destekler sorun olmaz.
https://developer.mozilla.org/tr/docs/Web/CSS/:not#Browser_compatibility
 

 

Udemy Wordpress Tema Yapımı Kursum

#8
MuratDinc MuratDinc Miyavliyo - WiseKitten Kullanıcı
  • Üyelik 01.11.2012
  • Yaş/Cinsiyet 32 / E
  • Meslek Girişimci
  • Konum Balıkesir
  • Ad Soyad M** D**
  • Mesajlar 1583
  • Beğeniler 207 / 257
  • Ticaret 5, (%100)

bilimokur adlı üyeden alıntı

Tarayıcılar destekler sorun olmaz.
https://developer.mozilla.org/tr/docs/Web/CSS/:not#Browser_compatibility


Tamamdır, çok teşekkürler.
 

 

👉 Türkiye'nin En Minnoş Kedi Bloğu Miyaliyo! 😻
HTML ya da PSD Ücretsiz Tema Paylaşımı Yapan Siteler?
Film sitesi için slider nasıl yapabilirim
wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
 
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al