CSS Podcast - 002: Seçiciler
Yalnızca makalenin ilk paragrafı olduğunda daha büyük ve kırmızı olmak istediğiniz bir metniniz varsa bunu nasıl yapabilirsiniz?
<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>
Söz konusu öğeyi bulmak için bir CSS seçici kullanır ve buna benzer bir CSS kuralı uygularsınız.
article p:first-of-type {
color: red;
font-size: 1.5em;
}
CSS, bu gibi durumları çözmenize yardımcı olmak amacıyla, öğeleri seçmeniz ve bu öğelere kurallar uygulamanız için çok basitten çok karmaşıka kadar birçok seçenek sunar.
CSS kuralının bölümleri
Seçicilerin işleyiş şeklini ve CSS'deki rollerini anlamak için CSS kuralının bölümlerini bilmek önemlidir. CSS kuralı, bir veya daha fazla seçici ve bir ya da daha fazla bildirim içeren bir kod bloğudur.
Bu CSS kuralında seçici, sayfadaki my-css-rule sınıfına sahip tüm öğeleri bulan .my-css-rule'dir.
Süslü parantez içinde üç bildirim vardır.
Bildirim, seçiciler tarafından eşleştirilen öğelere stiller uygulayan bir özellik ve değer çiftidir.
Bir CSS kuralının istediğiniz sayıda bildirimi ve seçicisi olabilir.
Basit seçiciler
En basit seçici grubu, HTML öğelerinin yanı sıra bir HTML etiketine eklenebilecek sınıf, kimlik ve diğer özellikleri hedefler.
Evrensel seçici
Joker karakter olarak da bilinen evrensel seçici, tüm öğelerle eşleşir.
* {
color: hotpink;
}
Bu kural, sayfadaki her HTML öğesinin hotpink metne sahip 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/padding olmasına neden olur.
Sınıf seçici
Bir HTML öğesinin class özelliğinde tanımlanmış bir veya daha fazla öğe olabilir.
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 yalnızca CSS'de bulunduğuna ve HTML'de olmadığına dikkat edin.
Bunun nedeni, . karakterinin CSS diline sınıf özelliği üyeleriyle eşleşmesi için talimat vermesidir.
Bu, seçici türlerini tanımlamak için bir özel karakter veya karakter kümesinin kullanıldığı CSS'de yaygın bir kalıptır.
.my-class sınıfına sahip bir HTML öğesi, aşağıdaki gibi birkaç sınıfa sahip olsa bile yukarıdaki CSS kuralıyla eşleştirilir:
<div class="my-class another-class some-other-class"></div>
Bunun nedeni, CSS'nin sınıfı tam olarak eşleştirmek yerine tanımlanan sınıfı içeren bir class özelliğini aramasıdır.
Kimlik seçici
id özelliğine sahip bir HTML öğesi, bir sayfada bu kimlik değerine sahip tek öğe olmalıdır.
Şunun gibi bir kimlik seçici içeren öğeleri seçersiniz:
#rad {
border: 1px solid blue;
}
Bu CSS, id değeri rad olan HTML öğesine aşağıdaki gibi 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ını istemek için # karakteri kullanın.
Özellik seçici
Özellik seçiciyi kullanarak belirli bir HTML özelliğine sahip veya bir HTML özelliği için belirli bir değere sahip öğeleri arayabilirsiniz.
Seçiciyi köşeli parantez ([ ]) ile sarmalayarak CSS'ye özellikleri aramasını söyleyin.
[data-type='primary'] {
color: red;
}
Bu CSS aşağıdaki gibi primary değerine sahip data-type özelliğine sahip tüm öğeleri arar:
<div data-type="primary"></div>
Belirli bir data-type değeri aramak yerine, değerinden bağımsız olarak özelliğin mevcut olduğu öğ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ı metne sahiptir.
Özellik seçicinize s operatörü ekleyerek büyük/küçük harfe duyarlı özellik seçiciler kullanabilirsiniz.
[data-type='primary' s] {
color: red;
}
Diğer bir deyişle, bir HTML öğesinde primary yerine data-type Primary varsa kırmızı metin görünmeyeceği anlamına gelir.
i operatörü kullanarak bunun tersini (büyük/küçük harfe duyarlılık) yapabilirsiniz.
Büyük/küçük harf operatörleriyle birlikte, özellik değerlerinin içindeki dizelerin bölümleriyle eşleşen operatörlere de erişebilirsiniz.
/* 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;
}
Gruplama seçiciler
Bir seçicinin yalnızca tek bir öğeyle eşleşmesi gerekmez. Birden çok seçiciyi virgülle ayırarak gruplandırabilirsiniz:
strong,
em,
.my-class,
[lang] {
color: red;
}
Bu örnekte, renk değişikliği hem <strong> 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 basit bir seçici kullanılır?
[], özellik basit seçicileri için kullanılır.#, kimlik basit seçicileri için kullanılır.*, evrensel basit seçicidir.., sınıf basit seçicileri için kullanılır.div {}
Yukarıdaki snippet'te ne tür basit bir seçici kullanılır?
., class basit seçicileri için kullanılır.element adı kullanılır.[], özellik basit seçicileri için kullanılır.#, ID basit seçicileri için kullanılır.Sözde sınıflar ve sözde öğeler
CSS, belirli bir platform durumuna odaklanan faydalı seçici türleri sunar. Örneğin, bir öğenin üzerine getirildiğinde, öğenin içindeki yapılar veya bir öğenin parçaları.
Sözde-sınıflar
HTML öğeleri, etkileşimde bulundukları veya alt öğelerinden biri belirli bir durumda olduğu için kendilerini çeşitli durumlarda bulur.
Örneğin, bir kullanıcı HTML öğesinin üzerine fare ile getirilebilir veya bir alt öğenin üzerine de getirilebilir.
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;
}
Sözde sınıflar modülünde daha fazla bilgi edinin.
Sözde öğe
Sözde öğeler, sözde sınıflardan farklıdır çünkü platform durumuna yanıt vermek yerine CSS ile yeni bir öğe ekliyorlar gibi davranırlar.
Sözde öğeler, sözde olmayan sınıflardan da farklıdır çünkü tek iki nokta üst üste (:) yerine çift iki nokta üst üste (::) kullanılır.
.my-element::before {
content: 'Prefix - ';
}
Bir bağlantının etiketinin önüne dosya türünü eklediğiniz yukarıdaki demoda olduğu gibi, bir öğenin başına içerik eklemek için ::before sözde öğesini veya bir öğenin sonuna içerik eklemek için ::after sözde öğesini kullanabilirsiniz.
Bununla birlikte, 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 ::selection öğesini de kullanabilirsiniz.
::selection {
background: black;
color: white;
}
Yapay öğeler hakkındaki modülde daha fazla bilgi edinebilirsiniz.
Öğrendiklerinizi sınayın
Sözde seçiciler hakkındaki bilginizi test edin
Sözde öğe seçiciler kaç tane iki nokta kullanır?
: kullanılır.:: kullanılır.p:hover {
background: white;
color: black;
}
Yukarıdaki snippet'te ne tür bir sözde seçici kullanılır?
: kullanılır.:: kullanılır.Karmaşık seçiciler
Çok sayıda seçici görmüşsünüzdür, ancak bazen CSS'nizle ilgili 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çicilerin bize daha fazla güç sağlasa da, alt öğeleri seçerek yalnızca aşağı doğru ilerleyebildiğimizi unutmamak gerekir. Yukarı doğru hedefleme yapıp bir üst öğe seçemiyoruz. İlerleyen bir derste, şelalenin ne olduğuna ve nasıl çalıştığına değineceğiz.
Kombinatörler
Kombinatör, iki seçici arasında bulunan öğedir.
Örneğin, seçici p > strong ise kombinasyon > karakteridir.
Bu birleştiricileri kullanan seçiciler, öğeleri dokümandaki konumlarına göre seçmenize yardımcı olur.
Alt öğe birleştirici
Alt birleştiricileri 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 olduğu için içeriği kalın yapar.
<p> içinde yer aldığı için bir alt öğedir.
Alt öğe birleştirici, bir alt öğeyi hedeflememize olanak tanır.
Bu işlevde, tarayıcıya alt öğeleri arama talimatı vermek için bir boşluk () kullanılır:
p strong {
color: blue;
}
Bu snippet, yalnızca <p> öğelerinin alt öğeleri olan tüm <strong> öğelerini seçerek bunları yinelenen şekilde mavi yapar.
Bu etki, yukarıdaki örnekte .top div birleşim seçicisi kullanılarak daha iyi görselleştirilir.
Bu CSS kuralı, bu <div> öğelerine sol dolgu ekler.
Kombinatör özyinelemeli olduğundan .top içindeki tüm <div> öğelerine aynı dolgu uygulanır.
.top öğesinin <div> alt öğesi olan birkaç <div> alt öğesine nasıl sahip olduğunu görmek için bu demodaki HTML paneline göz atın.
Sonraki eşdüzey kombinatör
Seçicinizde bir + karakterini kullanarak başka bir öğeyi hemen izleyen bir öğe arayabilirsiniz.
Yığılmış öğeler arasına boşluk eklemek için sonraki eşdüzey birleştiriciyi kullanarak yalnızca bir öğe .top alt öğesinin sonraki kardeşi olduğunda boşluk ekleyin.
Aşağıdaki seçiciyi kullanarak kenar boşluğunu tüm .top alt öğelerine ekleyebilirsiniz:
.top * {
margin-top: 1em;
}
Bu sorun, .top öğesinin her alt öğesini seçmeniz nedeniyle bu kuralın fazladan, gereksiz alan oluşturmasıdır.
Bir evrensel seçici ile birlikte kullanılan sonraki eşdüzey birleştirici, yalnızca hangi öğelerin yer alacağını kontrol etmekle kalmayıp herhangi bir öğeye de alan uygulamanızı sağlar.
Bu, .top öğesinde hangi HTML öğelerinin göründüğünden bağımsız olarak, uzun vadede biraz esneklik sağlar.
Sonraki - eşdüzey birleştirici
Sonraki bir kombinatör, sonraki eşdüzey seçiciye çok benzer.
Ancak + karakteri yerine ~ karakteri kullanın.
Bunun farkı, bir öğenin aynı üst öğeye sahip bir sonraki öğeyi takip etmek yerine, yalnızca aynı üst öğeye sahip başka bir öğeyi takip etmesidir.
Sonraki bu kombinasyon biraz daha az sabitlik sağlar. Bu, yukarıdaki örnekteki gibi bağlamlarda kullanışlıdır. İlgili onay kutusu :checked durumuna sahip olduğunda özel anahtarın rengini değiştiririz.
Çocuk kombinatörü
Alt birleştirici (doğrudan alt öğe olarak da bilinir), kombinasyon seçicilerle birlikte gelen yineleme üzerinde daha fazla kontrol sahibi olmanızı sağlar.
> karakterini kullanarak kombinatör seçiciyi yalnızca doğrudan alt öğelere uygulanacak şekilde sınırlandırmış olursunuz.
Önceki, sonraki kardeş seçici örneğini inceleyin. Boşluk her bir sonraki eşdüzey öğeye eklenir ancak bu öğelerden birinin alt öğe olarak sonraki eşdüzey öğelerin de bulunması, istenmeyen şekilde fazladan boşluk bırakılmasına neden olabilir.
Bu sorunu hafifletmek için sonraki eşdüzey seçiciyi bir alt birleştiriciyi dahil edecek şekilde değiştirin: > * + *.
Kural artık yalnızca .top kapsamındaki doğrudan alt yayıncılar için geçerli olacak.
Bileşik seçiciler
Spesifik ve okunabilirliği artırmak için seçicileri birleştirebilirsiniz.
Örneğin, aynı zamanda .my-class sınıfına sahip <a> öğelerini hedeflemek için aşağıdakini yazın:
a.my-class {
color: red;
}
Bu, tüm bağlantılara kırmızı renk sunmaz ve kırmızı rengi .my-class öğesine yalnızca bir <a> öğesinde if uygular.
Bu konu hakkında daha fazla bilgi için spesifiklik modülünü inceleyin.
Öğ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, örnek olarak...