CSS Seçicileri (CSS Selectors)

Bu yazımızda, web tasarımının olmazsa olmazlarından olan CSS seçicilerini detaylıca inceleyeceğiz. CSS seçicileri sayesinde belirli HTML elementlerini hedef alabilir ve bu elementlere stil tanımlayabiliriz.

CSS Seçicileri Nelerdir?

CSS seçicileri, adı üstünde, stilize etmek istediğimiz HTML elementlerini seçmek için kullanılan araçlardır. Bu seçiciler sayesinde, belirli elementlere veya element gruplarına özgü stil tanımlamaları yapabiliriz.

CSS seçici çeşitleri aşağıda listelenmiştir:

1. Tip Seçici (Element Selector): Belirli bir tipe ait tüm elementleri seçer.
   • Örnek: p { color: blue; }
2. ID Seçici (ID Selector): Belirli bir ID’ye sahip elementi seçer.
   • Örnek: #uniqueElement { background-color: yellow; }
3. Sınıf Seçici (Class Selector): Belirli bir sınıfa ait tüm elementleri seçer.
   • Örnek: .info { font-size: 16px; }
4. Evrensel Seçici (Universal Selector): Tüm elementleri seçer.
   • Örnek: * { margin: 0; padding: 0; }
5. Grup Seçici (Group Selector): Birden fazla seçiciyi gruplayarak aynı stil tanımlamalarını uygular.
   • Örnek: h1, h2, h3 { font-family: Arial, sans-serif; }
6. Nitelik Seçici (Attribute Selector): Belirli bir özelliğe sahip elementleri seçer.
   • Örnek: input[type="text"] { border: 1px solid black; }
7. Pseudo-class Selector: Belirli bir durumdaki elementleri seçer.
   • Örnek: a:hover { color: red; }
8. Pseudo-element Selector: Bir elementin belirli bir kısmını seçer.
   • Örnek: p::first-line { font-weight: bold; }

Tip Seçici (Element Selector)

Tip seçici, HTML dokümanı içinde belirli bir türdeki tüm elementleri seçmek için kullanılan bir CSS seçicisidir. Temel olarak, HTML’de sıkça karşımıza çıkan etiket isimlerini kullanarak bu etiketlere ait tüm elementleri stilize edebiliriz.

Syntax (sözdizimi) ise şu şekilde olacaktır:

Örneğin, web sitemizdeki tüm paragrafların (yani <p> etiketlerinin) metin rengini mavi yapmak istediğimizde, tip seçiciyi kullanabiliriz. Bu durumda kullanacağımız CSS kodu şu şekilde olacaktır:

Yukarıdaki kod, tüm <p> etiketlerini mavi yapar. Benzer şekilde, tüm başlık etiketlerini (örneğin, <h1>) belirli bir yazı tipiyle stilize etmek istediğinizde aşağıdaki gibi bir kod kullanabiliriz:

Bu kod ise tüm <h1> başlıklarını “Arial” yazı tipiyle gösterir. Eğer bu yazı tipi mevcut değilse, sans-serif yazı tipi kullanılır.

Tip seçicinin güzelliği, genel değişiklikler yapmak için oldukça kullanışlı olmasıdır. Tek bir satır kodla tüm belirli türdeki elementleri kolayca stilize edebiliriz.

Bu arada belirtmek isterim ki, element seçicisinin specificity değeri sadece 1‘dir. Bu, diğer bazı seçicilere göre oldukça düşük bir değerdir, ancak doğrudan HTML elementleriyle yapılan stil tanımlamalarında oldukça kullanışlıdır. Zira, stil tanımlamalarının genel bir yapıda uygulanmasına yardımcı olurken, daha özel stil tanımlamalarını geçersiz kılmaz.

See the Pen Tip Seçici by 1kodum (@1kodum) on CodePen.

ID Seçici (ID Selector)

İlk olarak neden adının ID olduğundan bahsedelim. “ID”, kimlik anlamına gelen “identification” kelimesinin kısaltmasıdır. Zaten bu adlandırma onun görevine dair önemli bir ipucu vermektedir. ID seçicisi CSS’de # işaretiyle tanımlanır. Nasıl ki, hepimizin kendine has ve bizi tanımlayan eşsiz bir kimliği varsa, # işareti ile belirtilen ID seçici ile HTML dokümanı içinde belirli bir elementi benzersiz bir şekilde tanımlayabilir ve ona özgü stil veya davranış tanımlamaları yapabiliriz.

Syntax (söz dizimi) şu şekildedir:

Diyelim ki, bir web sayfanız var ve bu sayfada, kullanıcılara özel bir teklif sunan öne çıkan bir butonunuz olacak. Ancak bu buton, sayfanızda sadece bir kez görünüyor ve ona özgü bir stil tanımlamak istiyorsunuz. İşte tam da bu tür durumlarda, ID seçici devreye girer. Bu benzersiz buton için bir ID tanımlayarak, onu diğer tüm butonlardan ayırabilir ve özelleştirebilirsiniz. Bakınız:

Bu şekilde, “ozelTeklifButonu” ID’sine sahip buton, sayfada altın rengi bir arka plana ve özel bir stil tanımlamasına sahip olacaktır.

Tekrar belirtmek istiyorum ki, bir HTML dokümanı içerisinde aynı ID değerinin sadece bir kez kullanmalıyız. Eğer bir ID değerini birden çok elementte kullanırsak, tarayıcılarda beklenmedik davranışlar görülebilir.

Son olarak specificity (ya da Türkçe karşılığıyla “özgüllük”) gücüne de değinmemiz gerek. ID seçicisinin specificity değeri 100 olarak belirlenmiştir. Bu yüksek değer, ID seçicisinin diğer birçok seçiciye göre tarayıcıda daha baskın olacağını gösterir. Yani, bir stil tanımlamasında ID seçicisi kullandıysanız, bu stil diğer kendinden güçsüz stil tanımlamalarını geçersiz kılacaktır. Bu sebeple, ID ile tanımladığınız stillerin, genel stillerin üzerinde dominant bir etkisi olduğunu aklınızdan çıkarmamalısınız.

Sınıf Seçici (Class Selector)

Başlamadan önce, “sınıf” isimlendirmesinin nereden geldiğinden bahsedelim. İngilizcesi “class” olan bu seçicinin adı, belirli bir grup veya kategoriye ait olma anlamına gelmektedir. Bu da sınıf seçicisinin temel görevine işaret eder. Sınıf seçicisi, CSS’de belirli bir grup elemente stil tanımlarken kullanılır ve bu seçiciyi tanımlamak için . işaretiyle başlarız. Bu işareti kullandıktan sonra istediğiniz sınıf adını yazarak belirli bir grup veya kategori HTML elementini benzer bir şekilde gruplayıp onlara ortak stil tanımlamaları yapabilirsiniz.

Syntax (söz dizimi) şu şekildedir:

Varsayalım ki, web sitenizde birçok buton var ve bu butonlardan bazıları birincil (primary) aksiyonları temsil ederken, bazıları ise ikincil (secondary) aksiyonları temsil ediyor. İşte burada sınıf seçicilerini kullanarak bu butonlara farklı stiller tanımlayabilirsiniz. Örneğin:

Bu örnekte, .btn sınıfı temel buton stilini tanımlar, .btn-primary ve .btn-secondary sınıfları ise özel buton stillerini ekler. Fark ettiyseniz, bir HTML elementi birden fazla sınıfa sahip olabilir; bu da onun daha modüler ve özelleştirilebilir olmasını sağlar.

Belirtmekte fayda var ki, sınıf seçicilerini istediğiniz kadar çok elementte kullanabilirsiniz. Bu, onların en büyük avantajlarından biridir.

Son olarak specificity değerine değinelim. Sınıf seçicisinin specificity değeri 10’dur. Haliyle, tip seçicisinden (element seçicisi) daha baskın, fakat ID seçicisinden daha zayıf olduğu görülmektedir. Yani, bir stil tanımlamada sınıf seçicisi kullanırsanız, bu stil tip seçicisine kıyasla daha baskın olacak, ama eğer aynı element üzerinde bir ID seçicisi stil tanımlaması da varsa, ID seçicisi bu sınıf seçicisini geçersiz kılacaktır.

See the Pen Untitled by 1kodum (@1kodum) on CodePen.

Evrensel Seçici (Universal Selector)

İlk olarak “evrensel” isimlendirmesinin nereden geldiğinden bahsedelim. İngilizcesi “universal” olan bu seçicinin adı, kapsayıcılık ve genellik anlamına gelir. Evrensel seçici, adından da anlaşılacağı üzere, bir HTML dokümanındaki tüm elementleri hedef alır ve bu seçiciyi tanımlamak için * işaretini kullanırız. Bu seçici, genellikle belirli bir stilin tüm elementlere uygulanmasını istediğimizde kullanılır.

Web sitemizde tüm metinlerin belirli bir yazı tipiyle veya renkte görüntülenmesini isteyebiliriz. Bu durumda “evrensel” seçiciyi kullanarak, tüm metinleri belirli bir stil ile tanımlayabiliriz. Örneğin:

Bu kod, sayfanızdaki tüm metinlerin Arial yazı tipiyle ve siyah renkte gösterilmesini sağlar.

Evrensel seçicinin geniş kapsamlı olmasından dolayı, kullanırken dikkatli olmanız gerekmektedir. Özellikle büyük web sitelerinde, tüm elementlere belirli bir stil uygulamak performans sorunlarına yol açabilir.

Son olarak specificity değerine değinelim. Evrensel seçicisinin specificity değeri 0‘dır. Bu, evrensel seçicisinin diğer seçicilere göre en zayıf seçici olduğunu gösterir. Yani, bir stil tanımlamasında evrensel seçici kullanırsanız, bu stil diğer bütün seçicilere kıyasla en zayıf olacaktır. Yani, aynı element üzerinde başka bir seçici stil tanımlaması varsa, bu seçici evrensel seçiciyi geçersiz kılacaktır. Bu yüzden, evrensel seçiciyle tanımladığınız stillerin genel olarak alt sıralarda kalmış olacağını aklınızda bulundurmalısınız.

Grup Seçici (Group Selector)

Grup seçicileri, birden fazla seçiciyi virgülle (,) ayırarak aynı stil tanımlamalarını bu seçicilere tek bir seferde uygulamak için kullanılır. Bu sayede, tekrar eden CSS kodlarını azaltarak hem kodun okunabilirliği artmış olur, hem de dosyanın boyutunu azaltmaya yardımcı olur.

Örneğin, web sitemizde farklı başlık seviyeleri (h1, h2, h3) için aynı yazı tipi ve renk tanımlamalarını kullanmak isteyebiliriz. Bu durumda grup seçici kullanarak, bu başlık seviyelerine ortak bir stil tanımlayabiliriz: Örneğin:

Bu stil tanımlaması, sayfamızdaki h1, h2 ve h3 etiketlerinin tümünün Arial yazı tipiyle ve mavi renkte görüntülenmesini sağlar.

Grup seçicileri, sadece aynı tipte seçicileri gruplamak için değil pekala aynı stil tanımlamalarını uygulamak istediğimz farklı seçici tiplerinde de kullanılabilir.

Yukarıdaki kodla, hem “anaBolum” ID’sine, hem “aciklama” sınıfına, hem de tüm “h2” etiketlerine kırmızı renk uygulanır.

Grup seçicileri kullanırken, belirlediğiniz stillerin tüm seçicilere uygulanacağını göz önünde bulundurmalısınız. Eğer farklı seçiciler için farklı stiller tanımlamak isterseniz, grup seçicisini kullanmak yerine her bir seçici için ayrı ayrı stil tanımlamaları yapmalısınız.

Son olarak specificity değerine de değinelim. Grup seçicisinin “specificity” değeri, içerisinde bulunan en yüksek specificity değerine sahip olan seçiciye eşittir. Yani, bir grup seçici içerisinde hem bir sınıf seçici, hem de bir ID seçici varsa, bu grup seçicisinin specificity değeri, ID seçicisinin specificity değeri kadar olacaktır. Ancak, grup içindeki seçicilerin her biri, kendi başlarına bu stil tanımlamalarını aldıklarında kendi specificity değerlerini korurlar. Bu nedenle, grup seçicisi kullanırken hangi elementlerin bu stilleri alacağını ve bu elementlerin diğer stil tanımlamalarıyla nasıl etkileşimde bulunabileceğini dikkatlice düşünmelisiniz.

Nitelik Seçici (Attribute Selector)

Nitelik seçicileri, HTML elemanlarını belirli bir niteliğe (attribute) sahip oldukları için seçmek istediğimizde kullanırız. Bu seçici türü, genellikle belirli niteliklere sahip öğeleri hedef alarak onlara stil tanımlamaları yapmamıza olanak tanır.

Syntax (söz dizimi) şu şekildedir:

• [nitelik]: Bu syntax, belirli bir niteliğe sahip tüm elementleri hedef alır.
• [nitelik="değer"]: Bu syntax, niteliği belirli bir değere eşit olan elementleri hedef alır.
• [nitelik^="değer"]: Bu syntax, niteliği belirtilen değerle başlayan elementleri hedef alır.
• [nitelik$="değer"]: Bu syntax, niteliği belirtilen değerle biten elementleri hedef alır.
• [nitelik*="değer"]: Bu syntax, niteliği belirtilen değeri içeren elementleri hedef alır.

Diyelim ki, birçok bağlantı (link) içeren bir web sitemiz var ve bu bağlantıların sadece belirli bir hedefe (target="_blank") sahip olanlarını farklı bir şekilde stilize etmek istiyoruz. İşte tam da bu tür durumlarda nitelik seçicileri devreye girer.

Bu kod sayesinde, target="_blank" niteliğine sahip olan bağlantılar mavi renkte ve kalın yazı tipiyle gösterilir.

Nitelik seçicileri ile sadece tam eşleşmeleri değil, belirli değerlerin içerisinde arama yaparak da elementleri hedef alabiliriz. Bu, özellikle belirli bir değer içeren niteliklere sahip öğeleri seçmek için oldukça kullanışlıdır.

Nitelik seçicisinin specificity değeri 10’dur. Yani, tip seçicisinden (element seçicisi) daha baskın, fakat sınıf ve ID seçicisinden daha zayıf olduğunu anlatmaktadır.

Pseudo-class Seçici

Pseudo-class seçicileriyle tanışmadan önce, bu ilginç isimlendirmenin nedenini birlikte keşfedelim. “Pseudo” kelimesi, Yunanca kökenli olup “yanıltıcı” veya “gerçek olmayan” anlamına gelir. Biz burada, gerçek bir sınıf oluşturmadan, belirli bir durum veya koşulda olan elementlere stil uygulamak istediğimizde bu seçicilere başvururuz.

Örneğin, bir bağlantıya (link) fare ile tıkladığımızda ya da üzerine geldiğimizde bu bağlantının renginin veya stilinin değişmesini isteyebiliriz. İşte bu gibi özel durumları hedef almak için pseudo-class seçicilerini kullanırız.

Pseudo-class seçicileri şu şekildedir:

Bazı yaygın kullanılan pseudo-class seçicilerini şöyle sıralayabiliriz:

1. :hover: Elementin üzerine gelindiğinde uygulanır.
2. :active: Elemente tıklanırken uygulanır.
3. :focus: Elemente odaklandığında (örn. bir input alanına tıklanınca) uygulanır.
4. :nth-child(): Belirli bir sıradaki çocuk elementi hedef alır.
5. :first-child: İlk çocuk elementi hedef alır.
6. :last-child: Son çocuk elementi hedef alır.

Bu pseudo-class seçicilerini kullanarak çeşitli durumları hedefleyebilir ve onlara özgü stiller tanımlayabiliriz. Örneğin:

Pseudo-class seçicileri, kullanıcı etkileşimleri ve belirli koşulları hedeflememize olanak tanır. Bu sayede kullanıcı deneyimini zenginleştirir ve web sitelerine dinamiklik katar.

Pseudo-element Seçici

“Pseudo-element”, gerçekte var olmayan, ama stil uygulamak için tanımlanan sanal bir elementi temsil eder. Bu seçiciler, bir elementin belirli bir kısmına stil uygulamamıza yardımcı olur.

Pseudo-element seçicileri şu şekildedir:

Pseudo-element seçicilerinin en yaygın olarak kullanılanları şunlardır:

1. ::before: Bir elementin içeriğinden önce içerik veya stil eklemek için kullanılır.
2. ::after: Bir elementin içeriğinden sonra içerik veya stil eklemek için kullanılır.
3. ::first-line: Bir metin bloğunun ilk satırını hedef alır.
4. ::first-letter: Bir metin bloğunun ilk harfini hedef alır.

Pseudo-element seçicileriyle şu tür uygulamaları gerçekleştirebiliriz:

See the Pen Pseudo-element Seçici by 1kodum (@1kodum) on CodePen.

Bu örnekte, ::before ve ::after pseudo-elementleri kullanılarak paragrafın başına ve sonuna büyük çift tırnak işareti ekledik.

Pseudo-element seçicileri, web tasarımında küçük dekoratif değişikliklerden büyük yapısal değişikliklere kadar birçok uygulamada kullanılır. Bunlar, CSS ile içerik eklememize veya belirli kısımlara özel stil uygulamamıza olanak tanır. Ancak, bu seçicileri kullanırken, onların gerçekte HTML dokümanında var olmadıklarını, yani sadece görsel amaçlı olduklarını unutmamak gerekir.