Tiesto

Tiesto

WFN Üye
Konular
530
Mesajlar
530
Çözüm
0
Ticaret Puanı
0
Üyelik
23 Gün
Konum
Antalya
Web Sitesi
Var
Alanı
Domain Uzmanı
1/1
Konu sahibi
CSS içindeki *, evrensel seçici olarak bilinir. En kısa anlamıyla, türü ne olursa olsun bütün öğeleri eşleştirebilir. Bu yüzden * tek başına yazıldığında sayfadaki tüm öğelere uygulanır; başka bir seçiciyle birlikte yazıldığında ise kapsamı o ilişkiye göre daralır. Önemli iki ayrıntı şudur: * doğrudan sözde öğeleri seçmez ve özgüllük hesabına puan eklemez.

* seçicisi tam olarak neyi seçer?​


* bütün öğeleri seçer. Buradaki “öğe”, HTML etiketlerinin DOM içindeki gerçek elemanlarıdır; yani div, p, a, img, section gibi düğümler bu kapsama girer. Tek başına * yazarsanız tüm belgeyi etkilersiniz. p * yazarsanız p öğelerinin içindeki tüm torun öğeleri seçersiniz. .row > * yazarsanız yalnızca .row içindeki doğrudan çocuklar seçilir. .card + * yazarsanız da .card öğesinden hemen sonra gelen kardeş öğe seçilir.

CSS: 
* {
  margin: 0;
}

article * {
  color: #333;
}

.row > * {
  flex: 1;
}

.notice + * {
  margin-top: 1rem;
}

Bu örneklerde ilk kural her öğeyi etkiler. İkinci kural yalnızca article içindeki tüm alt öğeleri etkiler; article öğesinin kendisini değil. Üçüncü kural tüm torunları değil, sadece doğrudan çocukları hedefler. Dördüncü kural ise * işaretini “burada hangi etiket olursa olsun” anlamında kullanır.

Diğer seçicilerle birlikte kullanıldığında nasıl davranır?​


Evrensel seçici çoğu zaman başka seçicilerle beraber okunurluğu artırmak veya ilişkiyi açık etmek için kullanılır. Örneğin *.warning ile .warning aynı şeyi seçer; *#maincontent ile #maincontent de eşdeğerdir. Bunun nedeni, * işaretinin bu tür birleşik seçicilerde eşleşme davranışını değiştirmemesidir. Yine de bazı geliştiriciler, özellikle karmaşık seçicilerde okumayı kolaylaştırmak için * kullanmayı tercih eder. W3C seçici kurallarına göre bir birleşik seçicide evrensel seçici varsa en başta yer almalıdır.

CSS: 
.warning {
  color: #b00020;
}

*.warning {
  color: #b00020;
}

article:first-child {
  border-top: 0;
}

article *:first-child {
  font-weight: 700;
}

Buradaki kritik fark şudur: article:first-child, kendisi başka bir öğenin ilk çocuğu olan article öğelerini seçer. article *:first-child ise article içindeki herhangi bir öğeyi, kendi ebeveyninin ilk çocuğuysa seçer. Bu iki yazım benzer görünse de sonuçları farklıdır; * işareti burada özellikle anlamı görünür kılmak için yararlıdır.

Özgüllük hesabında * neden önemlidir?​


* bütün öğeleri eşleştirse de özgüllük değerine katkı yapmaz; yani değeri 0-0-0 kabul edilir. Bu yüzden *.warning seçicisinin asıl ağırlığı .warning kısmından gelir ve özgüllüğü .warning ile aynıdır. Aynı şekilde * kullanmak bir kuralı daha “güçlü” hale getirmez; yalnızca neyin eşleştiğini ifade eder. Çakışma olduğunda sınıf, kimlik, tür seçicisi, katman ve yazım sırası gibi unsurlar belirleyici olur.

CSS: 
* {
  color: #444;
}

p {
  color: navy;
}

.alert {
  color: crimson;
}

Bu örnekte bir p öğesi genel olarak * kuralıyla eşleşir, ama p seçicisi tür sütununda puan taşıdığı için onun rengi uygulanır. class="alert" taşıyan bir paragraf ise hem * hem p hem de .alert ile eşleşir; bu kez .alert daha yüksek özgüllüğe sahip olduğu için crimson rengi kazanır. Bu nedenle * en geniş kapsamlı seçicilerden biri olsa da çoğu zaman en baskın seçici değildir.

Gerçek projelerde * ne zaman mantıklıdır?​


* en çok temel kurallar için mantıklıdır. Örneğin tüm öğelerde varsayılan kenar boşluklarını sıfırlamak, kutu modelini düzenlemek veya belirli bir kapsayıcının içindeki bütün çocuklara ortak bir davranış vermek istediğinizde işe yarar. Ancak kapsamı çok geniş olduğu için görsel yan etkiler üretmesi de kolaydır; body * ya da .component * gibi kurallar beklenmedik biçimde bağlantıları, listeleri, form alanlarını ve iç içe bileşenleri de etkileyebilir. Bu yüzden * ile yazılan kurallarda “gerçekten her öğeyi mi hedefliyorum, yoksa birkaç belirli öğeyi mi?” sorusunu sormak gerekir.

Bir başka önemli nokta sözde öğelerdir. * yalnızca öğeleri seçer; ::before ve ::after gibi sözde öğeleri doğrudan kapsamaz. Bu nedenle yaygın bir temel kural yazarken çoğu zaman sözde öğeleri açıkça eklemek gerekir. Aşağıdaki yazım bu yüzden sık görülür:

CSS: 
*,
*::before,
*::after {
  box-sizing: border-box;
}

Bu kuralın mantığı şudur: önce tüm gerçek öğeleri seçersiniz, ardından aynı davranışı ::before ve ::after sözde öğelerine de ayrıca uygularsınız. Sadece * { box-sizing: border-box; } yazarsanız sözde öğeler bu kurala doğrudan dahil olmaz.

İleri kullanım: ad alanı ile birlikte *​


CSS seçicilerinde * ad alanı ile de kullanılabilir. Bu ihtiyaç sıradan HTML sayfalarında sık çıkmaz; daha çok SVG, MathML veya XML tabanlı belgelerde karşınıza gelir. Örneğin ns|*, belirli bir ad alanındaki tüm öğeleri; *|*, bütün ad alanlarındaki tüm öğeleri; |* ise tanımlı bir ad alanı olmayan öğeleri eşleştirir. HTML içine gömülü SVG gibi karışık yapılarda bunun pratik değeri vardır.

CSS: 
@namespace svg url("http://www.w3.org/2000/svg");

svg|* {
  fill: currentColor;
}

Bu örnekte kural, yalnızca SVG ad alanındaki öğelere uygulanır. Normal HTML etiketleri etkilenmez. Günlük arayüz geliştirmede bu seviyeye her zaman ihtiyaç olmaz; ama * işaretinin yalnızca “her şey” anlamına gelmediğini, gerektiğinde “belirli bir ad alanındaki her şey” anlamına da gelebileceğini bilmek faydalıdır.

En küçük çalışır örnek​


Aşağıdaki örnek, * seçicisinin tek başına, kapsayıcı içinde ve sözde öğelerle birlikte nasıl davrandığını aynı anda gösterir.

HTML: 
<section class="card">
  <h2>Başlık</h2>
  <p>Bu bir <strong>örnek</strong> paragraftır.</p>
  <a href="#">Bağlantı</a>
</section>

CSS: 
*,
*::before,
*::after {
  box-sizing: border-box;
}

.card * {
  margin: 0;
}

.card > * + * {
  margin-top: 12px;
}

.card a {
  color: royalblue;
}

Bu kodda ilk kural tüm öğelerde ve yaygın sözde öğelerde aynı kutu modelini kurar. İkinci kural yalnızca .card içindeki tüm alt öğelerin kenar boşluklarını sıfırlar. Üçüncü kural, .card içindeki her öğeden önce gelen kardeşi olan doğrudan çocuklara üst boşluk ekler; yani başlık ile paragraf, paragraf ile bağlantı arasında düzenli bir dikey aralık oluşur. Son kural da bağlantı rengini özel olarak belirler. Buradaki temel ders şudur: * en faydalı halini, tek başına “her şeyi boya” mantığında değil; kapsamı bilinçli sınırlandırılmış seçicilerin parçası olduğunda verir.

* kullanırken kısa karar kuralı şu olabilir: Tüm öğeleri gerçekten birlikte hedefliyorsanız kullanın; yalnızca belirli etiketleri, sınıfları veya durumları hedefliyorsanız daha dar bir seçici tercih edin. Doğrudan çocuklar için > *, tüm torunlar için boşluklu ancestor *, sözde öğeler için ise *::before ve *::after yazmanız gerektiğini unutmayın.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)