CSS seçicileri

CSS seçicileri HTML öğelerini hedeflemek için kullanılır. Stil için öğeleri seçerken hassasiyete izin veren çok çeşitli CSS seçicileri bulunur. Bu makalede ve alt makalelerinde, nasıl çalıştıklarını görerek farklı türleri ayrıntılı olarak inceleyeceğiz.

CSS Seçicileri nedir?

Seçicilerle zaten tanıştınız. Bir CSS seçici, bir CSS Kuralının ilk kısmıdır. Bu, tarayıcıya kuralın içindeki CSS özellik değerlerinin uygulanması için hangi HTML öğelerinin seçilmesi gerektiğini söyleyen terimler kalıbıdır. Seçici tarafından seçilen eleman veya elemanlar seçicinin konusu olarak adlandırılır .

Daha önceki makalelerde, bazı farklı seçicilerle tanıştınız ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendiniz – örneğin, h1 gibi bir öğe veya .special gibi bir sınıfı biliyoruz.

CSS’de seçiciler, CSS Seçiciler spesifikasyonunda tanımlanır; CSS’nin diğer bölümleri gibi, çalışabilmeleri için tarayıcılarda desteğe sahip olmaları gerekir. Karşılaşacağınız seçicilerin çoğu, Seviye 3 Seçici özelliklerinde tanımlanmıştır. Bu seçiciler için mükemmel bir tarayıcı desteği bulabiliriz.

Seçici listeleri

Aynı CSS’yi kullanan birden fazla öğeniz varsa, bireysel seçiciler, kuralın tüm seçicilere uygulanması için bir seçici listesinde birleştirilebilir. Örneğin, bir h1 ve .special sınıfı için aynı CSS’ye sahipsem, bunu iki ayrı kural olarak yazabilirim.

h1 {
  color: blue;
}

.special {
  color: blue;
} 

Bunları aynı zamanda aralarına virgül ekleyerek bir seçici listede de birleştirebilirim.

h1, .special {
  color: blue;
} 

Beyaz boşluk, virgülden önce veya sonra geçerlidir. Her biri yeni bir satırda verilen seçicileri daha okunaklı bulabilirsiniz.

h1,
.special {
  color: blue;
} 

Aşağıdaki örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi deneyin. 

span {
    background-color: yellow;
}

strong {
    color: rebeccapurple;
}

em {
    color: rebeccapurple;
}

<h1>Type selectors</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
    melon azuki bean garlic.</p>

<p>Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
    greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>

<p>Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce kohlrabi amaranth water spinach avocado
    daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>

Birleştirdikten sonra görsel görüntü aynı olmalıdır:

Seçicileri bu şekilde grupladığınızda, herhangi bir seçici geçersizse tüm kural yok sayılır.

Aşağıdaki örnekte, geçersiz sınıf seçicisi yok sayılacak, ama h1 stili uygulanacaktır.

h1 {
  color: blue;
}

..special {
  color: blue;
} 

Bununla birlikte, birleştirildiğinde, kuralın tamamı geçersiz sayılacağından, ne sınıfa ne de h1‘e stil uygulanmayacaktır.

h1, ..special {
  color: blue;
} 

Seçici türleri

Birkaç farklı seçici grubu bulunur ve hangi tür seçiciye ihtiyacınız olabileceğini bilmek, iş için doğru aracı bulmanıza yardımcı olacaktır. Bu makalenin alt makalelerinde, farklı seçici gruplarına daha ayrıntılı olarak bakacağız.

Tür, sınıf ve kimlik seçicileri

Bu grup, <h1> gibi bir HTML öğesini hedefleyen seçicileri içerir

h1 { }

Ayrıca bir sınıfı hedefleyen seçicileri de içerir:

.box { }

veya bir kimlik:

#unique { }

Özellik seçiciler

Bu seçici grubu, bir öğede belirli bir özniteliğin varlığına bağlı olarak öğeleri seçmeniz için size farklı yollar sunar:

a[title] { }

Veya belirli bir değere sahip bir özniteliğin varlığına göre bir seçim yaparsınız:

a[href="https://example.com"] { }

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

Bu seçiciler grubu, bir öğenin belirli durumlarını biçimlendiren sözde sınıfları içerir, :hover gibi. Örneğin bu sözde sınıf fare işaretçisi ile üzerine gelindiği bağlantı öğesini seçer:

a:hover { }

Ayrıca, öğenin kendisinden ziyade bir öğenin belirli bir bölümünü seçen sözde öğeler de bulunur. Örneğin, ::first-line her zaman bir öğe içindeki metnin ilk satırını seçer ( aşağıdaki örnekte <p> öğesi), sanki bir <span> öğesi ilk satırın etrafına sarılmış ve sonra seçilmiş gibi davranır .

p::first-line { }

Birleştiriciler

Son seçici grubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Örneğin, aşağıdaki <article> öğesi bir alt birleştiriciyi ( >) kullanarak öğelerin doğrudan çocukları olan paragrafları seçer :

article > p { }

Seçicilerin referans tablosu

Aşağıdaki tablo, her tür seçiciyi nasıl kullanacağınızı gösteren kullanabileceğiniz seçicilere genel bir bakış sunar. Bunu, materyalde daha sonra seçicilere bakmanız gerektiğinde veya genel olarak CSS ile denemeler yaparken geri dönmek için bir referans olarak kullanabilirsiniz.

Sonraki adımlar

Bu bölümdeki çeşitli seçici türlerine göz atın ve denemeler yapın.