Bugün CSS ile ilgili bir ipucu vereceğim. Örneğin bir menü yaptığınızda veya tekrar eden bir div yaptığınızda birinci div'in farklı olması gerekir. Mesela border'ı yok etmeniz gerekebilir vs.

Bunun için şimdiye kadar ayrı bir class kullandıysanız bu ip ucu tam sizin için. Ayrı bir class kullanmaya gerek kalmadan da yapılabilir. Nasıl mı? Görelim.

Örneğin şu şekilde bir HTML kodumuz mevcut:

<div id="huko">menü</div>
<div id="huko">menü</div>
<div id="huko">menü</div>

Bunlar için şöyle bir css kodu kullanalım:

#huko { background-color: #ddd; }

Bu şekilde kullandığımızda şöyle bir görüntü alırız:

Şimdi gelelim asıl meselemize. İlk div'in arkaplan rengini değiştirmek için artık ayrı bir class kullanmanıza gerek yok. Küçük bir CSS kodu ile bunu yapabilirsiniz.

#huko { background-color: #ddd; }
#huko + #huko { background-color: #eee; }

Bu kod sayesinde aldığımız görüntü şu şekildedir:

Evet, istediğimizi ayrı bir class kullanmadan gerçekleştirdik.

Şimdi aynı şekilde çok kullanışlı başka bir yol daha göstereceğim. Bu sefer pseudo elemanlarından first-child ve last-child kullanacağız.

#huko { background-color: #ddd; }
#huko:first-child { background-color: red; }
#huko:last-child { background-color: green; }

first-child ile ilk elemanı ve last-child ile son elemanı seçip ayrı bir class kullanmadan stil verdik.

Sorularınız olursa yorum olarak bırakırsanız cevaplamaya çalışırım. İyi çalışmalar.