tilde (~) operatörü, seçici birimleri belirlerken kullanılan bir operatördür, özellikle belirli bir öğeden sonraki tüm elementleri seçmek için kullanılır.
Mesela, bir HTML dosyasında, birden fazla div
bulunabilir ve bu elementlerin bazıları farklı sınıflara sahip olabilir. Bu elementlerin bir alt kümesini seçmek istiyorsak, ~
operatörünü kullanabiliriz.
.div1 ~ .div2 {
color: red;
}
Yukarıdaki CSS kodu, belgedeki tüm .div2
class’ına sahip elementleri seçer, ancak sadece bu öğelerden önce gelen tüm .div1
class’a sahip elementlerin stillerini uygular.
Formda label
ve input
alanı olabilir. İlgili label’ları belirli bir input alanıyla eşleştirmek istediğimizde, ~
operatörü kullanılabilir.
label[for="input1"] ~ input[type="text"] {
border: 1px solid red;
}
Yukarıdaki CSS kodu, for
attribute "input1"
olan herhangi bir tag’den sonra gelen herhangi bir text
type input alanına bir border uygular.
~Tilde — CSS kodunu daha az kod tekrarıyla daha verimli hale getirir.
Tilde operatörü sadece belirli bir element den sonra gelen öğeleri seçebilir. Elementlerin öncesindeki Elementleri seçmekistiyorsanız, +
operatörünü kullanmanız gerekir.
Ayrıca, tilde operatörü yalnızca aynı hiyerarşik seviyedeki elementleri hedefleyebilir. Yani, bir elementin altında başka elementler varsa, tilde operatörü bu öğeleri seçemez. 🙁
Tilde operatörü genellikle diğer seçicilerle birleştirilir. Bir class seçicisiyle birleştirerek, belirli bir class’a sahip elementten sonra gelen elementleri seçebilirsiniz.
.div1.special ~ .div2 {
color: red;
}
Yukarıdaki CSS kodu, .div1
class’ına sahip elementlerin ardından gelen, .div2
class’ına sahip elementleri seçer, ancak yalnızca .special
class’ına sahip olan .div1
elementlerini seçer.
CSS’de tilde operatörü daha verimli ve tutarlı kod yazmanıza yardımcı olurken, yanlış kullanımı da stil çatışmalarına neden olabilir. İşte bazı öneriler:
- Seçicileri belirlemek için tilde operatörünü kullanmadan önce, öncelikle diğer seçicilerin kullanımını değerlendirin. Bazı durumlarda, tilde operatörü yerine
descendant
veyachild
seçicileri daha uygun olabilir. - Seçiciler arasında boşluk bırakın. Bu, kodun daha okunaklı olmasına ve yardımcı olacaktır.
- Class ve id seçicilerini de dahil etmeyi unutmayın. Bu, kodu daha tutarlı hale getirmeye yardımcı olacaktır.
- Mümkün olduğunca spesifik seçiciler kullanmaya çalışın. Bu, stil düzeni için daha esnek bir kod tabanı oluşturmaya yardımcı olacaktır.
Bir kaç örnek kod bloğu paylaşayım;
- Bir elementten sonra gelen ilk elementi seçmek için:
div ~ p:first-of-type {
color: red;
}
<div>
elementinin hemen ardından gelen ilk <p>
elementini seçer ve ona kırmızı renk verir.
2. Elementden sonra gelen belirli bir elementi seçmek için:
div ~ p.special {
font-weight: bold;
}
Yukarıdaki örnek, <div>
elementinin ardından gelen herhangi bir <p>
elementini seçer, ancak yalnızca .special
class’ına sahip olan öğeleri kalın olarak belirginleştirir.
3. Elementden sonra gelen tüm elementleri seçmek için:
div ~ p {
text-decoration: underline;
}
<div>
elementinin hemen ardından gelen tüm <p>
elementileri seçer ve altı çizili olarak görüntüler.
4. Belirli bir class’a sahip elementden sonra gelen belirli bir elementi seçmek için:
.special ~ p.special {
color: blue;
}
.special
class’ına sahip bir elementden sonra gelen herhangi bir <p>
elementi seçer, ancak yalnızca .special
class’ına sahip olan elementleri mavi olarak belirginleştirir.
Bir Örnek Daha:
<div class="container">
<h2>Başlık</h2>
<p>Bu bir paragraf.</p>
<p>Bu bir başka paragraf.</p>
<ul>
<li>Liste öğesi 1</li>
<li>Liste öğesi 2</li>
</ul>
<p class="special">Bu bir özel paragraf.</p>
<p>Bu bir sonraki paragraf.</p>
<ul>
<li>Liste öğesi 3</li>
<li>Liste öğesi 4</li>
</ul>
</div>
Bir <div>
elementi içinde birkaç <h2>
, <p>
ve <ul>
elementi içeren belirli elementleri seçebiliriz.
.container ~ .special {
color: blue;
}
.container
class’ına sahip herhangi bir elementden sonra gelen .special
class’ına sahip olan elementleri seçer ve onlara mavi renk verir. Bu durumda, .special
class’ına sahip elementlerden sadece biri, <p>
elementiyle ayrılan iki liste elementi arasında bulunmaktadır.
Bir Örnek Daha:
<div class="container">
<h2>Başlık</h2>
<p>Bu bir paragraf.</p>
<div class="inner">
<h3>Alt Başlık</h3>
<p>Bu bir alt paragraf.</p>
<ul>
<li>Liste öğesi 1</li>
<li>Liste öğesi 2</li>
</ul>
<p class="special">Bu bir özel paragraf.</p>
<p>Bu bir sonraki alt paragraf.</p>
<ul>
<li>Liste öğesi 3</li>
<li>Liste öğesi 4</li>
</ul>
</div>
<p>Bu bir sonraki paragraf.</p>
</div>
<div>
elementi, içinde birkaç farklı element bulunan bir örnek oluşturuyor. Tilde operatörünü kullanarak iç <div>
elementinden sonra gelen belirli elementleri seçebiliriz.
.inner ~ p {
font-style: italic;
}
.inner
class’ına sahip elementten sonra gelen tüm <p>
elementlerini seçer ve onlara italic biçim verir. .inner
class’ına sahip elementlerden sadece biri, içinde yer aldığı <div>
elementiyle ayrılan son <p>
elementi olacaktır.