Bu makalede muhtemelen en sık kullanacağınız en basit seçicilerden bazılarını inceleyeceğiz.
Tür seçiciler
Bir tür seçici , belgenizdeki bir HTML etiketini/öğesini seçtiği için bazen etiket adı seçici veya öğe seçici olarak da adlandırılır. Aşağıdaki örnekte span
, em
ve strong
seçicilerini kullandık.
Aşağıdaki örnekte <h1>
öğesini seçmek ve rengini mavi olarak değiştirmek için bir CSS kuralı eklemeyi 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>
Evrensel seçici
Evrensel seçici bir yıldız işaretiyle ( *
) belirtilir. Belgedeki (veya başka bir öğe ve alt bir birleştiriciyle birlikte zincirleniyorsa ana öğenin içindeki) her şeyi seçer. Aşağıdaki örnekte, tüm öğelerdeki kenar boşluklarını kaldırmak için evrensel seçiciyi kullanıyoruz. Tarayıcı tarafından eklenen, başlıkları ve paragrafları kenar boşluklarıyla ayıran varsayılan stil yerine, her şey birbirine yakınlaştırıyoruz.
* {
margin: 0;
}
<h1>Universal selector</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>
Bu tür davranışlar bazen tüm tarayıcı stilini ortadan kaldıran “biçim sayfalarını sıfırla”da görülebilir. Evrensel seçici genel değişiklikler yaptığından, onu aşağıda açıklanan gibi çok özel durumlar için kullanırız.
Seçicilerin daha kolay okunması için evrensel seçiciyi kullanma
Evrensel seçicinin bir kullanımı da seçicilerin daha kolay okunmasını ve yaptıkları iş açısından daha belirgin olmasını sağlamaktır. Örneğin, <article>
öğesinin doğrudan çocukları da dahil olmak üzere, ebeveynlerinin ilk çocuğu olan bir öğenin herhangi bir alt öğesini seçip kalın yapmak istiyorsak, :first-child
sözde sınıfını kullanabiliriz.
article :first-child {
font-weight: bold;
}
Ancak, bu seçici, öğenin ilk çocuğunu seçen article:first-child
öğesi ile karıştırılabilir. Burada herhangi bir <article>
öğesinin ilk çocuğunu seçiyoruz.
Bu karışıklığı önlemek için, evrensel seçiciyi :first-child
sözde sınıfa ekleyebiliriz, böylece seçicinin ne yaptığı daha açık olur.
article *:first-child {
font-weight: bold;
}
Her ikisi de aynı şeyi yapsa da, okunabilirlik önemli ölçüde iyileştirilmiştir.
Sınıf seçiciler
Sınıf seçici bir nokta (.
) karakteriyle başlar. Kendisine uygulanan sınıfa sahip her şeyi seçecektir. Aşağıdaki örnekte highlight
adında bir sınıf oluşturduk ve bunu birkaç yere uyguladık. Sınıfın uygulandığı tüm öğelerin rengi değişti:
.highlight {
background-color: yellow;
}
<h1 class="highlight">Class selectors</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p class="highlight">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>
Sonuç aşağıdaki gibi:

Belirli öğelerdeki sınıfları hedefleme
Uygulanan sınıfla belirli öğeleri hedefleyecek de bir seçici oluşturabilirsiniz. Bu örnekte, highlight
sınıfına sahip <span>
öğesi ile yine highlight
sınıfına sahip <h1>
öğesine farklı özellikler vereceğiz. Hedeflemek istediğimiz öğe için tür seçiciyi kullanıyoruz ve sonrasında sınıfın adını aralarında boşluk bırakmadan yazıyoruz:
span.highlight {
background-color: yellow;
}
h1.highlight {
background-color: pink;
}
<h1 class="highlight">Class selectors</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span class="highlight">kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p class="highlight">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>

Bu yaklaşım kuralın kapsamını azaltır. Kural yalnızca o belirli öğe ve sınıf kombinasyonu için geçerli olacaktır. Kuralın diğer öğelere de uygulanması gerektiğine karar verdiyseniz başka bir seçici eklemeniz gerekir.
Birden fazla sınıfın uygulandığı bir öğeyi hedefleyin
Bir öğeye birden çok sınıf uygulayabilir ve bunları tek tek hedefleyebilir veya yalnızca seçicideki tüm sınıflar mevcut olduğunda o öğeyi seçebilirsiniz. Bu, sitenizde farklı şekillerde birleştirilebilecek bileşenler oluştururken yardımcı olabilir.
Aşağıdaki örnekte bir not içeren <div>
öğemiz var. Kutunun bir notebox
sınıfı olduğunda gri kenarlık uygulanır. Ayrıca warning
veya danger
sınıfına sahipse border-color
uygulanır.
Tarayıcıya, öğeyi yalnızca bu iki sınıf varsa seçmesini söylemek için aralarında boşluk olmadan sınıfları zincirleyerek uygularız. Aşağıdaki örnekte son <div>
öğesi yalnızca danger
sınıfına sahip olduğu için bir değişiklik görmeyeceksiniz. Değişiklik için notebox
sınıfı ile birlikte danger
sınıfının da olması gerekir:
.notebox {
border: 4px solid #666;
padding: .5em;
}
.notebox.warning {
border-color: orange;
font-weight: bold;
}
.notebox.danger {
border-color: red;
font-weight: bold;
}
<div class="notebox">
This is an informational note.
</div>
<div class="notebox warning">
This note shows a warning.
</div>
<div class="notebox danger">
This note shows danger!
</div>
<div class="danger">
This won't get styled — it also needs to have the notebox class
</div>

Kimlik seçiciler
Kimlik seçici nokta yerine bir #
(hashtag) karakteriyle başlar, ancak sınıf seçiciyle aynı şekilde kullanılır. Ancak, bir kimlik sayfa başına yalnızca bir kez kullanılabilir ve öğelere yalnızca tek bir id
değeri uygulanabilir. Aynı zamanda öğe türünü de belirtebilirsiniz:
#one {
background-color: yellow;
}
h1#heading {
color: rebeccapurple;
}
<h1 id="heading">ID selector</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p id="one">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>

Uyarı: Bir belgede aynı kimliği birden çok kez kullanmak stil oluşturma amacıyla işe yarayabilir, ancak bunu yapmayın. Bu geçersiz bir kodla sonuçlanabilir ve birçok yerde garip davranışlara neden olabilir.
Not: Özgüllük kısmında öğrendiğimiz gibi, bir kimliğin özgüllüğü yüksektir. Diğer seçicilerin çoğunu geçersiz kılar. Çoğu durumda, bir öğeye kimlik yerine bir sınıf eklemek tercih edilir. Ancak, öğeyi hedeflemenin tek yolu kimliği kullanmaksa – belki de işaretlemeye erişiminiz olmadığı ve düzenleyemediğiniz için – bu yöntem işe yarayacaktır.
Bir sonraki makalede
Öznitelik seçicilere bakarak seçicileri keşfetmeye devam edeceğiz .