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 .