id ile class Arasındaki Fark

CSS CLASS ile ID‘yi karşılaştırırken aradaki farkı en temel şekilde açıklayacak olursak, CSS class birden çok öğeye bir stil uygulamasıdır. id ise, benzersiz bir öğeye bir stil uygular.

ID ayrıca, bir öğeye doğrudan bağlanmak için özel bir URL kullanabilmeniz ve JavaScript tarafından kullanılması bakımından da özeldir.

CSS’de seçiciler, bir web sayfasındaki belirli bir öğeyi veya öğe aralığını hedeflemek için kullanılır. Bir öğe hedeflendiğinde, öğeye bir stil veya stil kümesi uygulanabilir.

CSS Class ve id Seçiciler

Class selector ile id selector arasındaki en önemli fark? Bu, CSS’de yeni olan birçok geliştirici tarafından sorulan bu soruya bu yazı kılavuz olacaktır.

Bu kılavuzu okuduktan sonra, bu iki seçici arasındaki farkları öğreneceksiniz. Kodunuzda hangi seçiciyi kullanacağınız konusunda bilinçli bir karar vermek için ihtiyaç duyduğunuz bilgilere sahip olacaksınız. Başlayalım.

CSS Seçiciler

Bir web sayfası tasarlarken, belirli stillerin sayfadaki belirli öğelere uygulanmasını isteyeceksiniz.

Örneğin, tüm etiketlerinin metin rengini yeşil olarak ayarlamak veya bir başlığın yazı tipi boyutunu değiştirmek isteyebilirsiniz.

Seçiciler, stilleri uygulayabileceğiniz bir web sayfasındaki belirli öğeleri hedeflemenize olanak tanır. CSS’de evrensel seçiciler, alt seçiciler, alt seçiciler ve gruplama seçicileri gibi birçok seçici mevcuttur.

class ve id olmak üzere iki seçici, sırasıyla bir HTML öğesine atanan sınıf ve kimliğe dayalı olarak öğelere stiller uygulamak için kullanılır. Ancak bu seçiciler genellikle karıştırılır, o yüzden her birinin nasıl çalıştığını inceleyelim.

Id Seçici Benzersizdir

ID(Kimlik) seçici, web sayfasındaki tek bir öğeye uygulanan stil kurallarını tanımlamanıza olanak tanır. Her web sayfası, tek bir kimlik özniteliğine sahip yalnızca bir öğeye sahip olabilir. Bu, kimlik seçicinin asla birden fazla öğeye stil vermek için kullanılamayacağı anlamına gelir.

Kimlik seçiciler, bir hashtag(diyez) işareti kullanılarak tanımlanır. Hemen ardından, bir dizi stil kuralı uygulamak istediğiniz kimlik değeri gelir. İşte, eylem halindeki bir kimlik seçicinin bir örneği:

Bu stil, HTML belgemizdeki slogan kimliğine sahip <h1> öğesi için geçerlidir. Stil, öğenin yazı rengini kırmızı ve yazı stilini italik yapar.

Class Seçici Benzersiz Değildir

Bir class(sınıf) seçici, belirli bir değere eşit bir sınıf özniteliğine sahip herhangi bir öğeye uygulanan stil kurallarını tanımlamanıza olanak tanır.

Daha önce tartıştığımız gibi, id(kimlik) seçici yalnızca bir öğeye stil vermek için kullanılabilir. Bunun nedeni, kimliklerin bir web sayfasında yalnızca bir kez kullanılabilmesidir. Öte yandan sınıflar, birden çok öğe arasında kullanılabilir. Bu nedenle, bir sınıf seçici kullanarak bir stil uygularsanız, o sınıfı paylaşan herhangi bir öğe tanımladığınız stillere tabi olacaktır.

Class seçiciler, bir nokta ve ardından bir stil kümesi uygulamak istediğiniz sınıfın değeri kullanılarak tanımlanır.

İşte uygulamadaki sınıf seçicinin bir örneği:

Bu stil, <p> ve <div> etiketlerinin 4 özelliğini yukarıdaki gibi ayarlar. Bu ayarlama için class(sınıf) adı olarak da kutu ismi kullanır. İki ayrı etiketin aynı sınıfı kullanarak biçimlendirilebileceğini unutmayın.

ID’lerin Benzersiz Bir Tarayıcı Fonksiyonu Vardır

Şimdiye kadar, kimliklerin stilleri yalnızca bir öğeye uygulayabildiğini tartıştık. Birden çok öğeye stil uygulayabilen sınıfların aksine. Sınıf ve kimlik seçicileri arasındaki tek fark bu değildir.

Tarayıcıda sınıfların özel bir işlevi yoktur. Ana amaçları, bir web sayfasındaki çeşitli öğelere stiller uygulamanıza izin vermektir. Kimlikler ise tarayıcı tarafından web sayfasının belirli bir bölümüne gitmek için kullanılabilir.

Bir öğeye bir kimlik atarsanız, doğrudan o öğeye bağlanmak için özel bir URL kullanabilirsiniz. Bu davranış, kimliklerin bir web sayfasında benzersiz olması nedeniyle çalışır.

Kullanıcıyı otomatik olarak bir başlığa kaydıran web sitemize bir bağlantı göndermek istediğimizi varsayalım. Bunu şu kodu kullanarak yapabiliriz:

ID’ler JavaScript Tarafından Kullanılır

JavaScript kullanma deneyiminiz varsa, kimliklerin o programlama dilinde yaygın olarak kullanıldığını bilirsiniz. getElementById işlevi, bir web sayfasındaki bir öğeyi seçmenize olanak tanır. Yalnızca bir öğenin aynı kimliği paylaşabileceği gerçeğine dayanır.

Sınıflar ise bir web sayfasında birden çok öğeyi yansıtabilir. JavaScript’te belirli bir öğeyle çalışmak istiyorsanız kullanışlı olmazlar.

Sonuç

CSS ile çalışırken, sizi bir sınıf üzerinde bir kimlik kullanmaya zorlayan belirli bir neden yoktur. Ancak, bir stilin web sayfasındaki bir öğeye uygulanmasını istiyorsanız yalnızca kimlikleri kullanmak ve bir stilin birden çok öğeye uygulanmasını istiyorsanız sınıfları kullanmak en iyi uygulamadır.

Bu öğreticide, örneklere atıfta bulunarak CSS ID ve sınıf seçicilerinin temellerini tartıştık ve ikisini karşılaştırdık ve karşılaştırdık. Artık uzman bir geliştirici gibi CSS kimliğini ve sınıf seçicilerini kullanmaya hazırsınız!