Seçiciler

CSS Podcast - 002: Seçiciler

Yalnızca bir makalenin ilk paragrafıysa daha büyük ve kırmızı olmasını istediğiniz metinler varsa bunu nasıl yaparsınız?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

Belirli bir öğeyi bulmak ve buna bir CSS kuralı uygulamak için CSS seçici kullanırsınız.

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

CSS, bu gibi durumları çözmenize yardımcı olmak için öğeleri seçip onlara kural uygulamak üzere çok basitten çok karmaşığa kadar birçok seçenek sunar.

CSS kuralının bölümleri

Seçicilerin işleyiş şeklini ve CSS'deki rollerini anlamak için CSS kuralının bölümlerini bilmeniz önemlidir. CSS kuralı, bir veya daha fazla seçici ve bir veya daha fazla beyan içeren bir kod bloğudur.

.my-css-rule seçicisine sahip bir CSS kuralının resmi.

Bu CSS kuralında seçici, sayfadaki my-css-rule sınıfına sahip tüm öğeleri bulan .my-css-rule bağımsız değişkenidir. Kıvrık parantez içinde üç tane beyan vardır. Tanım, seçiciler tarafından eşleşen öğelere stil uygulayan bir özellik ve değer çiftidir. Bir CSS kuralında istediğiniz kadar beyan ve seçici bulunabilir.

Basit seçiciler

En basit seçici grubu, HTML öğelerinin yanı sıra HTML etiketine eklenebilecek sınıfları, kimlikleri ve diğer özellikleri hedefler.

Evrensel seçici

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Joker karakter olarak da bilinen evrensel seçici herhangi bir öğeyle eşleşir.

* {
  color: hotpink;
}

Bu kural, sayfadaki her HTML öğesinin metninin hotpink rengi olmasını sağlar.

Tür seçici

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Tür seçici, doğrudan bir HTML öğesiyle eşleşir.

section {
  padding: 2em;
}

Bu kural, her <section> öğesinin tüm taraflarında 2em padding'ye sahip olmasına neden olur.

Sınıf seçici

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Bir HTML öğesinin class özelliğinde bir veya daha fazla öğe tanımlanabilir. Sınıf seçici, kendisine uygulanmış sınıfa sahip tüm öğelerle eşleşir.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

Sınıfın uygulandığı tüm öğeler kırmızı renkte gösterilir:

.my-class {
  color: red;
}

. öğesinin yalnızca CSS'de bulunduğuna ve HTML'de bulunmadığına dikkat edin. Bunun nedeni, . karakterinin CSS diline sınıf özelliği üyelerini eşleştirme talimatı vermesidir. Bu, CSS'de yaygın bir kalıptır. Seçici türlerini tanımlamak için özel bir karakter veya karakter grubu kullanılır.

.my-class sınıfına sahip bir HTML öğesi, aşağıdaki gibi başka sınıflara sahip olsa bile yukarıdaki CSS kuralıyla eşleştirilir:

<div class="my-class another-class some-other-class"></div>

Bunun nedeni, CSS'nin sınıfı tam olarak eşleştirmek yerine tanımlanan sınıfı içeren bir class özelliği aramasıdır.

Kimlik seçici

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

id özelliğine sahip bir HTML öğesi, bir sayfada bu kimlik değerine sahip tek öğe olmalıdır. Öğeleri aşağıdaki gibi bir kimlik seçici ile seçersiniz:

#rad {
  border: 1px solid blue;
}

Bu CSS, rad değerine sahip id olan HTML öğesine mavi bir kenar uygular.

<div id="rad"></div>

Sınıf seçici .'e benzer şekilde, CSS'ye onu takip eden id ile eşleşen bir öğe araması talimatı vermek için # karakterini kullanın.

Özellik seçici

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Source

Özellik seçiciyi kullanarak belirli bir HTML özelliğine sahip veya belirli bir HTML özelliği değerine sahip öğeleri arayabilirsiniz. CSS'ye, seçiciyi köşeli parantezle ([ ]) sarmalayarak özellikleri aramasını söyleyin.

[data-type='primary'] {
  color: red;
}

Bu CSS, data-type özelliğinin değeri primary olan tüm öğeleri arar. Örneğin:

<div data-type="primary"></div>

data-type için belirli bir değer aramak yerine, değerinden bağımsız olarak özelliğin bulunduğu öğeleri de arayabilirsiniz.

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

Bu <div> öğelerinin her ikisinde de kırmızı metin bulunur.

Özellik seçicinize bir s operatörü ekleyerek büyük/küçük harf duyarlı özellik seçicileri kullanabilirsiniz.

[data-type='primary' s] {
  color: red;
}

Yani bir HTML öğesinin primary yerine Primary değerine sahip bir data-type özelliği varsa kırmızı metin gösterilmez. i operatörünü kullanarak bunun tam tersini (büyük/küçük harf duyarlılığı) de yapabilirsiniz.

Büyük/küçük harf operatörlerinin yanı sıra, özellik değerleri içindeki dizelerin bölümlerini eşleştiren operatörlere de erişebilirsiniz.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}
Bu demoda, özellik seçicimizdeki `$` operatörü, dosya türünü "href" özelliğinden alır. Bu sayede, sözde öğe kullanarak etikete söz konusu dosya türüne göre ön ek ekleyebilirsiniz.

Gruplandırma seçicileri

Bir seçicinin yalnızca tek bir öğeyle eşleşmesi gerekmez. Birden fazla seçiciyi virgülle ayırarak gruplandırabilirsiniz:

strong,
em,
.my-class,
[lang] {
  color: red;
}

Bu örnekte, renk değişikliği hem <strong> öğelerini hem de <em> öğelerini kapsayacak şekilde genişletilmiştir. Ayrıca .my-class adlı bir sınıfa ve lang özelliğine sahip bir öğeye de genişletilir.

Öğrendiklerinizi test etme

Basit seçicilerle ilgili bilginizi test edin

* {}

Yukarıdaki snippet'te ne tür bir basit seçici kullanılmıştır?

özellik
[], özellik basit seçicileri için kullanılır.
Kimlik
#, ID basit seçicileri için kullanılır.
evrensel
*, evrensel basit seçicidir.
sınıf
., class basit seçicileri için kullanılır.
 
div {}

Yukarıdaki snippet'te ne tür bir basit seçici kullanılmıştır?

sınıf
Sınıf basit seçicileri için . kullanılır.
tür
Tür basit seçicileri için element adı kullanılır.
özellik
Kare parantezler [], özellik basit seçicileri için kullanılır.
Kimlik
Kimlik basit seçicileri için # kullanılır.

Sözde sınıflar ve sözde öğeler

CSS, fareyle bir öğenin üzerine gelindiğinde, öğenin içindeki yapılar veya öğenin bölümleri gibi belirli platform durumuna odaklanan kullanışlı seçici türleri sağlar.

Sözde sınıflar

HTML öğeleri, etkileşime geçildikleri veya alt öğelerinden biri belirli bir durumda olduğu için çeşitli durumlarda bulunur.

Örneğin, bir HTML öğesi kullanıcı tarafından fareyle veya bir alt öğe de kullanıcı tarafından fareyle işaretlenebilir. Bu tür durumlarda :hover sözde sınıfını kullanın.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

Daha fazla bilgi için sözde sınıflar modülüne göz atın.

Sözde öğe

Sanal öğeler, platform durumuna yanıt vermek yerine CSS ile yeni bir öğe eklemiş gibi davrandıkları için sanal sınıflardan farklıdır. Söz dizimi açısından da sözde öğeler, sözde sınıflardan farklıdır. Bunun nedeni, tek bir iki nokta işareti (:) yerine çift iki nokta işareti (::) kullanılmasıdır.

.my-element::before {
  content: 'Prefix - ';
}

Yukarıdaki demoda, bir bağlantının etiketine dosya türünü ön ek olarak eklediğiniz gibi, bir öğenin başına içerik eklemek için ::before sözde öğesini veya bir öğenin sonuna içerik eklemek için ::after sözde öğesini kullanabilirsiniz.

Ancak sözde öğeler içerik eklemekle sınırlı değildir. Ayrıca, bir öğenin belirli bölümlerini hedeflemek için de kullanabilirsiniz. Örneğin, bir listeniz olduğunu varsayalım. Listedeki her madde işaretine (veya sayıya) stil uygulamak için ::marker simgesini kullanın.

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

Kullanıcı tarafından vurgulanan içeriğe stil uygulamak için ::selection simgesini de kullanabilirsiniz.

::selection {
  background: black;
  color: white;
}

Sanal öğeler modülünde daha fazla bilgi edinin.

Öğrendiklerinizi test etme

Sözde seçicilerle ilgili bilginizi test edin

Sanal öğe seçicilerinde kaç tane iki nokta üst üste kullanılır?

:
Sanal sınıfları hedeflemek için bir : kullanılır.
::
Sanal öğeleri hedeflemek için iki :: kullanılır.
:::
Bu geçersizdir ve hiçbir şeyi hedeflemez.
 
p:hover {
  background: white;
  color: black;
}

Yukarıdaki snippet'te ne tür bir sözde seçici kullanılmıştır?

Sözde sınıf
Sanal sınıfları hedeflemek için bir : kullanılır.
Sözde öğe
Sanal öğeleri hedeflemek için iki :: kullanılır.

Karmaşık seçiciler

Çok çeşitli seçicileri gördünüz ancak bazen CSS'nizle daha ayrıntılı denetim yapmanız gerekir. Bu noktada karmaşık seçiciler devreye girer.

Aşağıdaki seçiciler bize daha fazla güç verse de alt öğeleri seçerek yalnızca aşağı doğru basamaklandırabileceğimizi hatırlatmak isteriz. Yukarı doğru hedefleme yapamıyoruz ve üst öğe seçemiyoruz. Şelalenin ne olduğunu ve nasıl çalıştığını sonraki bir derste ele alacağız.

Birleştiriciler

Bir birleştirici, iki seçicinin arasına yerleştirilir. Örneğin, seçici p > strong ise birleştirici > karakteridir. Bu birleştiricileri kullanan seçiciler, öğeleri dokümandaki konumlarına göre seçmenize yardımcı olur.

Alt öğe birleştirici

Alt öğe birleştiricileri anlamak için öncelikle üst ve alt öğeleri anlamanız gerekir.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

Üst öğe, metin içeren <p> öğesidir. Bu <p> öğesinin içinde, içeriğini kalın yapan bir <strong> öğesi vardır. <p> içinde olduğu için alt öğedir.

Alt öğe birleştirici, bir alt öğeyi hedeflememize olanak tanır. Bu örnekte, tarayıcıya alt öğeleri araması için bir boşluk () kullanılır:

p strong {
  color: blue;
}

Bu snippet, yalnızca <p> öğelerinin alt öğeleri olan tüm <strong> öğelerini seçer ve bunları yinelemeli olarak mavi yapar.

Alt öğe birleştirici yordamlı olduğundan her alt öğeye eklenen dolgu uygulanır ve bu da kademeli bir etki oluşturur.

Bu etki, yukarıdaki örnekte birleştirici seçici .top div kullanılarak daha iyi görselleştirilmiştir. Bu CSS kuralı, <div> öğelerine soldan dolgu ekler. Birleştirici yordamlı olduğundan, .top içindeki tüm <div> öğelerine aynı dolgu uygulanır.

.top öğesinin, <div> alt öğesine sahip olduğunu ve bu alt öğelerin de <div> alt öğesine sahip olduğunu görmek için bu demodaki HTML paneline göz atın.

Sonraki kardeş birleştirici

Seçicinizde + karakterini kullanarak bir öğeyi hemen takip eden öğeyi arayabilirsiniz.

Yığılmış öğeler arasına boşluk eklemek için sonraki kardeş birleşim işlevini kullanın. Bu işlev, yalnızca bir öğenin .top alt öğesinin sonraki kardeşi olduğunda boşluk ekler.

Aşağıdaki seçiciyi kullanarak .top öğesinin tüm alt öğelerine kenar boşluğu ekleyebilirsiniz:

.top * {
  margin-top: 1em;
}

Bununla ilgili sorun, .top öğesinin her alt öğesini seçtiğiniz için bu kuralın gereksiz yere fazla yer oluşturma potansiyeline sahip olmasıdır. Sonraki kardeş birleştirici, evrensel seçici ile birlikte kullanıldığında yalnızca hangi öğelerin boşluk alacağını kontrol etmenizi değil, herhangi bir öğeye boşluk uygulamanızı da sağlar. Bu, .top içinde hangi HTML öğelerinin göründüğünden bağımsız olarak uzun vadede esneklik sağlar.

Sonraki kardeş kombinasyon aracı

Sonraki birleştirici, sonraki kardeş seçiciye çok benzer. Ancak + karakteri yerine ~ karakterini kullanın. Bu, bir öğenin aynı üst öğeye sahip bir sonraki öğe olması yerine, aynı üst öğeye sahip başka bir öğeyi takip etmesi gerektiği anlamına gelir.

Saf CSS anahtar öğesi oluşturmak için ":checked" sözde sınıfıyla birlikte bir sonraki seçiciyi kullanın.

Bu sonraki birleştirici, biraz daha az katılık sağlar. Bu, ilişkili onay kutusunun :checked durumunda olduğunda özel bir anahtarın rengini değiştirdiğimiz yukarıdaki örnek gibi bağlamlarda kullanışlıdır.

Alt birleştirici

Alt birleştirici (doğrudan alt öğe olarak da bilinir), birleştirici seçicilerle birlikte gelen yineleme üzerinde daha fazla kontrol sahibi olmanızı sağlar. > karakterini kullanarak birleştirici seçiciyi yalnızca doğrudan alt öğelere uygulamak üzere sınırlandırırsınız.

Önceki, sonraki kardeş seçici örneğini düşünün. Boşluk her sonraki kardeş öğesine eklenir ancak bu öğelerden birinin alt öğeleri olarak sonraki kardeş öğeleri varsa istenmeyen ek boşluklar oluşabilir.

Bu sorunu hafifletmek için sonraki kardeş seçiciyi bir alt birleştiriciyi içerecek şekilde değiştirin: > * + *. Kural artık yalnızca .top öğesinin doğrudan alt öğeleri için geçerli olacaktır.

Bileşik seçiciler

Belirliliği ve okunabilirliği artırmak için seçicileri birleştirebilirsiniz. Örneğin, .my-class sınıfına da sahip olan <a> öğelerini hedeflemek için aşağıdakileri yazın:

a.my-class {
  color: red;
}

Bu durumda tüm bağlantılara kırmızı renk uygulanmaz ve kırmızı renk yalnızca <a> öğesindeyse .my-class'e if. Bu konuda daha fazla bilgi için özgünlük modülüne bakın.

Öğrendiklerinizi test etme

Karmaşık seçicilerle ilgili bilginizi test edin

Aşağıdaki simgelerden hangisi seçici birleştirici değildir?

>
Doğrudan alt öğe birleştiricisi.
÷
Geçersiz, CSS simgesi değil.
+
Sonraki kardeş birleştirici.
*
Bu evrensel basit seçici.
.
Sınıf basit seçici.
 
section.awesome {
  border: 1px solid hotpink;
}

Yukarıdaki seçici,...

Birleştirici
Seçicileri daha spesifik bir seçiciyle birleştirmek için kullanılan bir simge.
Yerleşke seçici
Daha spesifik bir seçici oluşturmak için 2 veya daha fazla seçici, bir birleştirici olmadan birlikte kullanıldığında.
Terminator
Bir seçici türü değil ama öyle gibi görünüyor, değil mi? 🤖

Kaynaklar