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
* {}
Yukarıdaki snippet'te ne tür bir basit seçici kullanılmıştır?
div {}
Yukarıdaki snippet'te ne tür bir basit seçici kullanılmıştır?
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
Sözde öğe seçiciler kaç adet iki nokta üst üste kullanır?
p:hover { background: white; color: black; }
Yukarıdaki snippet'te ne tür bir yapay seçici kullanılıyor?
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
Aşağıdaki simgelerden hangisi seçici birleştirici değildir?
section.awesome { border: 1px solid hotpink; }
Yukarıdaki seçici bir...