CSS'de :is() Pseudo-Sınıfı Kullanımı

CSS'de :is() pseudo-sınıfı, bir dizi seçiciyi gruplamak ve aynı kod bloğunu tekrar etmek yerine bir defada seçmek için kullanılır. Bu pseudo-sınıfı kullanarak, kodunuzu daha temiz, daha okunaklı ve daha sürdürülebilir hale getirebilirsiniz.

:is() pseudo-sınıfı, CSS seçicileri ile birleştirilerek kullanılabilir.

Örneğin, aşağıdaki kodda :is() pseudo-sınıfı, h1, h2 ve h3 seçicilerini gruplamak için kullanılmıştır:

:is(h1, h2, h3) {
  color: red;
}

Bu kod, h1, h2 ve h3 seçicilerindeki tüm metinleri kırmızıya ayarlar. :is(), aynı kod bloğunu tekrar etmek yerine seçicileri gruplamak için kullanılarak kodun daha az tekrar edilmesini sağlar.

:is() Pseudo-Sınıfının Kullanım Örnekleri

Birden Fazla Seçiciyi Gruplama

Aşağıdaki örnek, :is() kullanarak birden fazla seçiciyi gruplar:

:is(h1, h2, h3) {
  color: red;
  font-size: 2em;
}

Bu kod, h1, h2 ve h3 seçicilerindeki tüm metinleri kırmızıya ve 2em büyüklüğe ayarlar.

İç İçe Geçmiş Seçicileri Gruplama

Aşağıdaki örnek, :is() kullanarak iç içe geçmiş seçicileri gruplar:

:is(section article, aside p) {
  margin: 0;
  padding: 0;
}

Bu kod, section içindeki article ve aside içindeki p seçicilerindeki tüm öğelerin kenar boşluklarını sıfırlar.

İç İçe Geçmiş Seçicileri Daha Kısa Şekilde Gruplama

Aşağıdaki örnek, :is() kullanarak iç içe geçmiş seçicileri daha kısa bir şekilde gruplar:

section :is(article, aside) {
  margin: 0;
  padding: 0;
}

Bu kod, section içindeki article ve aside seçicilerindeki tüm öğelerin kenar boşluklarını sıfırlar.

Seçici ve Classları Gruplama

Aşağıdaki örnek, :is() seçici ve classları gruplamak için de kullanır:

:is(h1.special, h2, .important) {
  font-size: 2em;
  font-weight: bold;
}

Bu kod, h1 seçicisindeki .special classına, h2 seçicisine ve .important classına sahip tüm öğelerin font büyüklüğünü 2em ve font kalınlığını bold olarak ayarlar.

:is() Kullanımının Avantajları

:is(), birden fazla seçiciyi gruplamak ve kodun daha temiz ve okunaklı hale getirilmesi gibi avantajlara sahiptir. Ayrıca, özellikle iç içe geçmiş seçicilerde kullanıldığında, daha kısa ve okunaklı kodlar yazmanızı sağlar. Bu, kodun daha kolay anlaşılmasını ve sürdürülebilirliğini artırır.

Örneğin, aşağıdaki kod bloklarını karşılaştırın:

cssCopy code/* Kod blok 1 */
section article h1,
section article h2,
section article h3,
aside p {
  margin: 0;
  padding: 0;
}

/* Kod blok 2 */
:is(section article h1, section article h2, section article h3, aside p) {
  margin: 0;
  padding: 0;
}

Kod blok 1, her seçici için ayrı ayrı belirtilen kod bloklarını içerir. Kod blok 2 ise :is() pseudo-sınıfını kullanarak aynı işlevselliği daha okunaklı bir şekilde sağlar.

Sonuç

:is() pseudo-sınıfı, birden fazla seçiciyi gruplamak için kullanışlı bir araçtır. Kodunuzu daha temiz ve daha okunaklı hale getirebilirsiniz. İç içe geçmiş seçicilerde kullanıldığında, daha kısa ve okunaklı kodlar yazmanızı sağlar. Bu, kodun daha kolay anlaşılmasını ve sürdürülebilirliğini artırır.

Buraya kadar okuduğunuz için teşekkürler, umarım faydalı bir yazı olmuştur.

Cemali Gencer