Seçiciler

CSS Podcast'i - 002: Seçiciler

Metnin ilk paragrafıysa ve daha büyük ve kırmızı olmasını istediğiniz bir metin varsa bunu nasıl yapacaksınız?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

Belirli bir öğeyi bulmak için bir CSS seçici kullanır ve aşağıdaki gibi bir CSS kuralı uygularsınız.

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

CSS, öğeleri seçmek ve kuralları öğelere uygulamak için birçok seçenek sunar. değişiklik gösterebilir. Çevik Manifesto’yu tanıttım.

CSS kuralının bölümleri

Seçicilerin nasıl çalıştığını ve CSS'deki rollerini anlamak için CSS kuralının bölümlerini bilmek önemlidir. CSS kuralı bir kod bloğudur. bir veya daha fazla seçici ve bir ya da daha fazla bildirim içerir.

Bu CSS kuralında seçici, .my-css-rule olur (sayfadaki my-css-rule sınıfına sahip tüm öğeleri bulur). Kıvrık ayraç içinde üç beyan var. Bildirim, seçicilerle eşleşen öğelere stiller uygulayan bir özellik ve değer çiftidir. Bir CSS kuralında istediğiniz sayıda bildirim ve seçici bulunabilir.

Basit seçiciler

En basit seçici grubu, HTML öğelerini, sınıfları, kimlikleri ve diğer özellikleri içerir.

Evrensel seçici

Joker karakter olarak da bilinen evrensel seçici herhangi bir öğeyle eşleşir.

* {
  color: hotpink;
}

Bu kural, sayfadaki her HTML öğesinde hotpink metin olmasına neden olur.

Tür seçici

Tür seçici bir HTML öğesiyle doğrudan eşleşir.

section {
  padding: 2em;
}

Bu kural, her <section> öğesinin tüm kenarlarda 2em değerine sahip padding olmasına neden olur.

Sınıf seçici

Bir HTML öğesinin, class özelliğinde tanımlanmış bir veya daha fazla öğesi olabilir. İlgili içeriği oluşturmak için kullanılan sınıf seçici ilgili sınıfın uygulandığı tüm öğelerle eşleşir.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

Sınıfın uygulandığı tüm öğeler kırmızı renkte olur:

.my-class {
  color: red;
}

. öğesinin HTML'de değil, yalnızca CSS'de bulunduğuna dikkat edin. Bunun nedeni, . karakterinin CSS diline sınıf özelliği üyelerini eşleştirme talimatı vermesidir. Bu, CSS'de yaygın olarak kullanılan bir kalıp olup veya karakter kümesi, seçici türlerini tanımlamak için kullanılır.

.my-class sınıfına sahip bir HTML öğesi yine de yukarıdaki CSS kuralıyla eşleştirilir. hatta böyle birkaç sınıfa sahip olsalar bile:

<div class="my-class another-class some-other-class"></div>

Bunun nedeni CSS'nin, tanımlanan sınıfı içeren bir class özelliğini aramasıdır. eşleştirmeye karar veriyorum.

Kimlik seçici

id özelliğine sahip bir HTML öğesi, söz konusu kimlik değerine sahip bir sayfada bulunan tek öğe olmalıdır. Bir Kimlik seçici şu şekildedir:

#rad {
  border: 1px solid blue;
}

Bu CSS, id değeri rad olan HTML öğesine şu şekilde mavi bir kenarlık uygular:

<div id="rad"></div>

. sınıf seçicisine benzer şekilde, CSS'ye kendisinden sonra gelen id ile eşleşen bir öğe araması talimatı vermek için bir # karakteri kullanın.

Özellik seçici

Belirli bir HTML özelliğine sahip öğeleri arayabilirsiniz, bir HTML özelliği için belirli bir değere sahip olmaları durumunda özellik seçiciyi kullanarak. Seçiciyi köşeli parantezler ([ ]) içine alarak CSS'den özellikleri aramasını isteyin.

[data-type='primary'] {
  color: red;
}

Bu CSS, primary değerine sahip data-type özelliğine sahip tüm öğeleri şu şekilde arar:

<div data-type="primary"></div>

Belirli bir data-type değerini aramak yerine, değeri ne olursa olsun bu özelliğe sahip öğeleri de arayabilirsiniz.

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

Bu <div> öğelerinin her ikisi de kırmızı metinle gösterilir.

Büyük/küçük harfe duyarlı özellik seçiciler kullanabilirsiniz özellik seçicinize s operatörü ekleyerek yapabilirsiniz.

[data-type='primary' s] {
  color: red;
}

Yani bir HTML öğesinde data-type Primary varsa primary yerine kırmızı metin almayacaksınız. i operatörü kullanarak bunun tersini yapabilirsiniz (büyük/küçük harfe duyarlılık).

Büyük/küçük harf operatörleriyle birlikte özellik değerlerinin içindeki dizelerin bölümleriyle eşleşen operatörlere erişiminiz olur.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

Gruplandırma seçiciler

Bir seçicinin yalnızca tek bir öğeyle eşleşmesi gerekmez. Birden fazla seçiciyi virgülle ayırarak gruplandırabilirsiniz:

strong,
em,
.my-class,
[lang] {
  color: red;
}

Bu örnekte, renk değişikliği hem <strong> öğelerine hem de <em> öğelerine genişletilir. Ayrıca, .my-class adlı bir sınıfa ve lang özelliğine sahip bir öğeye genişletildi.

Öğrendiklerinizi sınayın

Basit seçiciler hakkındaki bilginizi test edin

* {}

div {}

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

CSS, belirli platform durumuna odaklanan faydalı seçici türleri sağlar. Örneğin, bir öğenin üzerine gelindiğinde, bir öğenin içindeki yapılar veya öğenin belirli bölümleri.

Sözde sınıflar

HTML öğeleri kendilerini çeşitli durumlarda bulur: Bunun nedeni kullanıcıların, veya alt öğelerinden biri belirli bir durumda.

Örneğin, bir kullanıcı HTML öğesinin fareyle üzerine fareyle gelebilir veya bir alt öğenin fareyle üzerine gelindiği durumlar olabilir. Bu durumlar için :hover sözde sınıfını kullanın.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

Sahte sınıflar modülünden daha fazla bilgi edinebilirsiniz.

Sözde öğe

Sözde öğeler, sözde sınıflardan farklıdır çünkü platform durumuna yanıt vermek yerine gibi davranırlar. Sözde öğeler, sözde sınıflardan söz dizimsel olarak da farklıdır. çünkü tek iki nokta (:) yerine çift iki nokta (::) kullandığımızdan.

.my-element::before {
  content: 'Prefix - ';
}

Yukarıdaki demoda, bir bağlantının etiketine ön ekini eklediğiniz dosya türünü eklediğiniz gibi bir öğenin başına içerik eklemek için ::before sözde öğesini kullanabilirsiniz, veya bir öğenin sonuna içerik eklemek için ::after sözde öğesi kullanın.

Ancak sözde öğeler, içerik eklemekle sınırlı değildir. Bunları bir öğenin belirli bölümlerini hedeflemek için de kullanabilirsiniz. Örneğin, bir listeniz olduğunu varsayalım. Listedeki her madde işaretinin (veya numaranın) stilini belirlemek için ::marker kullanın

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

Bir kullanıcı tarafından vurgulanan içeriğin stilini belirlemek için de ::selection aracını kullanabilirsiniz.

::selection {
  background: black;
  color: white;
}

Sözde öğe modülünde daha fazla bilgi edinebilirsiniz.

Öğrendiklerinizi sınayın

Sözde seçicilerle ilgili bilginizi test edin

p:hover {
  background: white;
  color: black;
}

Karmaşık seçiciler

Daha önce çok çeşitli seçicilerde, ancak bazen CSS'niz üzerinde daha ayrıntılı kontrole ihtiyacınız olabilir. Karmaşık seçiciler tam da bu noktada devreye girer.

Bu noktada, aşağıdaki seçiciler bize daha fazla güç sağlasa da, şunu unutmamak gerekir: alt öğeleri seçerek yalnızca aşağı doğru basamaklayabilir. Yukarı doğru hedefleme yapıp üst öğe seçemeyiz. Bu slaytın ne olduğunu ve nasıl çalıştığını açıklayacağız. daha fazla bilgi edineceksiniz.

Kombinatörler

Kombinatör, iki seçici arasında yer alır. Örneğin, seçici p > strong ise birleştirici > karakteri olur. Bu birleştiricileri kullanan seçiciler, öğeleri dokümandaki konumlarına göre seçmenize yardımcı olur.

Alt öğe birleştirici

Alt öğe kombinatörlerini anlamak için önce üst ve alt öğeleri anlamanız gerekir.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

Üst öğe, metin içeren <p> öğesidir. Bu <p> öğesinin içinde bir <strong> öğesi bulunduğu için içeriği kalın yapılır. <p> öğesinin içinde olduğu için bir alt öğedir.

Alt öğe birleştirici, bir alt öğeyi hedeflememize olanak tanır. Bu komut, tarayıcıya alt öğeleri arama talimatı vermek için boşluk () kullanır:

p strong {
  color: blue;
}

Bu snippet tüm <strong> öğelerini seçer Bunlar, yalnızca <p> öğelerinin alt öğeleridir ve bunları yinelemeli olarak maviye dönüştürür.

Bu etki yukarıdaki örnekte daha iyi görselleştirilir. .top div birleştirici seçiciyi kullanabilirsiniz. CSS kuralı, bu <div> öğelerine sol dolgu ekler. Kombinatör yinelemeli olduğu için, .top içindeki tüm <div> öğelerine aynı dolgu uygulanır.

Bu demodaki HTML paneline göz atın için, .top öğesinin kendisinde bulunan ve kendi başına <div> <div> alt öğesine sahip.

Sonraki kardeş birleştirici

Başka bir öğeyi hemen izleyen bir öğeyi arayabilirsiniz (seçicinizde bir + karakteri kullanarak).

Yığılmış öğeler arasına boşluk eklemek için: alan eklemek için sonraki kardeş birleştiriciyi kullan yalnızca bir öğe, .top alt öğesinin sonraki kardeşi ise.

.top alt öğelerine kenar boşluğu ekleyebilirsiniz. şu seçiciyi kullanın:

.top * {
  margin-top: 1em;
}

Bununla ilgili sorun şu: .top öğesinin her alt öğesini seçtiğinizden bu kural fazladan ve gereksiz alan oluşturabilir. Bir sonraki eşdüzey birleştirici, evrensel seçici ile birlikte kullandığınızda yalnızca hangi öğelere yer kaplayacağını değil, ancak herhangi bir öğeye de boşluk uygular. Bu size uzun vadeli esneklik sağlar. .top içinde görünen HTML öğelerinden bağımsız olarak.

Sonraki - kardeş birleştirici

Sonraki birleştirici, bir sonraki eşdüzey seçiciye çok benzer. Ancak bir + karakteri yerine, ~ karakter kullanın. Aradaki fark, bir öğenin aynı üst öğeye sahip başka bir öğeyi izlemesi gerekmesidir. öğe olmaya değil başka bir öğe seçer.

Sonraki bu birleştirici, biraz daha az esneklik sağlar. Bu, yukarıdaki örnek gibi bağlamlarda kullanışlıdır. Burada, ilişkili onay kutusu :checked durumundaki özel bir anahtarın rengini değiştiririz.

Alt birleştirici

Çocuk birleştirici (doğrudan alt alt öğe olarak da bilinir) birleştirme seçicileriyle gelen yineleme üzerinde daha fazla kontrol sahibi olmanızı sağlar. > karakterini kullanarak, birleştirici seçiciyi yalnızca çocukları yönlendirmek için geçerli olacak şekilde sınırlandırmış olursunuz.

Bir önceki kardeş öğe seçici örneğini düşünün. Alan, sonraki her kardeşe eklenir. ancak bu öğelerden birinin alt öğe olarak sonraki kardeş öğeler de varsa istenmeyen ekstra boşluklara neden olabilir.

Bu sorunu hafifletmek için bir alt birleştirici eklemek için sonraki eşdüzey seçiciyi değiştirin: > * + *. Kural artık yalnızca .top adlı çocuğun doğrudan alt öğeleri için geçerli olacak.

Bileşik seçiciler

Belirliliği ve okunabilirliği artırmak için seçicileri birleştirebilirsiniz. Örneğin, <a> öğelerini hedeflemek için .my-class sınıfına sahipse aşağıdakileri yazın:

a.my-class {
  color: red;
}

Bu durumda tüm bağlantılara kırmızı renk uygulanmaz Ayrıca, kırmızı renk yalnızca bir <a> öğesinde olduğunda .my-class öğesine uygulanır. Bu konu hakkında daha fazla bilgi için spesifiklik modülüne göz atın.

Öğrendiklerinizi sınayın

Karmaşık seçiciler hakkındaki bilginizi test edin

section.awesome {
  border: 1px solid hotpink;
}

Kaynaklar

• CSS seçiciler referansı
• Etkileşimli seçici oyunu
• Sözde sınıf ve sözde öğe referansı
• CSS seçicileri yalın bir İngilizce açıklayıcıya çeviren bir araç