Seçici türleri
Seçici türleri
Seçici türleri, CoddyKit'te ücretsiz bir HTML for Kids dersidir. Bu, 1 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML for Kids öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML for Kids kursu toplamda 1 dersten oluşur.
Giriş
Merhaba,
Bu derste, daha karmaşık seçicilerle CSS bilgimizi daha da geliştireceğiz.
Birden Fazla Stil Tanımlaması
Her stilin arasına noktalı virgül koyarak birden fazla stil tanımlaması yapabiliriz.
.first{
color:blue;
font-size:20px;
text-align: center;
}daha karmaşık hâle gelen bir HTML belgesi
Şimdiye kadar basit etiket, ID ve sınıf seçicileriyle çalıştık. Ancak bazı durumlarda, kullanıcı arayüzü karmaşıklaştığında daha karmaşık seçiciler kullanmamız gerekir.
Aşağıdaki örnekte daha karmaşık hâle gelen bir HTML belgesi bulunmaktadır.
<body>
<div id="my-area">
<p class="first">lorem</p>
<div class="second">
<p class="third">Ipsum</p>
</div>
</div>
</body>örneği analiz etme
Şimdi kodumuzu analiz edelim.
- Sayfanın gövdesi içinde kapsayıcı görevi gören, my-area ID'sine sahip bir div vardır. Bu div'in altındaki tüm öğelerin atasısıdır.
- first sınıfına sahip p öğesi, second sınıfına sahip div öğesinin kardeşidir.
- Üçüncü öğe, ikinci öğenin alt öğesidir ve my-area öğesi üçüncü öğenin atası olarak kabul edilebilir.
Uyarı
HTML düzenini gerçek bir aile ağacı gibi düşünebilirsiniz.
Büyükbabanızdan genetik olarak miras alabilirsiniz.
Ancak bu miras babanızda değişirse, babanızın geni daha baskın olur ve büyükbabanızdan gelen özellik değişir.
Seçici Birleştirmeleri
Şimdi seçicilerde nasıl birleştirme yapılacağını görelim.
Aşağıdaki ifade, ikinci sınıfa sahip öğenin üçüncü sınıfa sahip öğenin alt öğesi veya alt soyundan gelen öğesi olduğunu belirtir.
İki sınıf arasında boşluk varsa bu, soldaki sınıfın bir alt öğe aradığı anlamına gelir.
.second .third{
color:red;
}Alt Öğe Seçicisi
Aşağıdaki örnekte
ikinci sınıfın alt öğesi olan üçüncü sınıfın seçilmesi anlamına gelir.
Büyüktür işareti, ilgili öğenin alt öğesinin seçileceği anlamına gelir.
.second > .third{
color:red;
}bir öğeyi seçmek için etiket ve sınıf seçicisini birleştirebiliriz.
Aynı zamanda bir öğeyi seçmek için etiket ve sınıf seçicisini birleştirebiliriz.
Aşağıdaki örnek, üçüncü sınıfa sahip p öğelerini seçecektir.
<style>
p.third{
color:red;
}
</style>
<p class="third">Hello CSS</p>first sınıfına sahip bir div seçmek istediğimizi varsayalım.
first sınıfına sahip bir div seçmek istediğimizi varsayalım.
Aşağıdaki örnekte, my-area ID'sine sahip div öğesinin alt öğesi olan first sınıfına sahip öğenin seçilmesi anlatılmaktadır.
Bu, seçilecek öğenin özgüllüğünü artırır.
div#my-area > .first{
color:red;
}Tümünü Seçme
Yıldız işareti (*) seçiciler arasında önemlidir.
Bu işaret tümünü seçmek anlamına gelir.
Aşağıdaki örnekte seçici, my-area ID'sine sahip öğenin tüm alt öğelerini seçmesi gerektiğini belirtir.
Burada dikkat etmemiz gereken nokta, yalnızca doğrudan alt öğelerin değil, tüm alt öğelerin seçilmesidir.
Yalnızca doğrudan alt öğeleri seçmek isteseydik, büyüktür işaretini yıldız işaretinin önüne koymamız gerekirdi.
/* It chooses all the descendants of #my-area. */
#my-area *{
color:red;
}
/* It chooses all the children of #my-area. */
#my-area > *{
color:red;
}Bitişik Kardeş Seçicisi
Alt öğe seçicisini ve çocuk seçicisini kullandık; şimdi kardeş seçicisini öğrenelim.
Kardeş seçicisi, sonraki kardeşi seçmek için + işaretini kullanır.
Örneğimizde, 3. paragraf öğesinin arka plan rengi seçici tarafından sarıya dönüştürülecektir.
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
</body>
</html>Genel Kardeş Seçicisi
Yalnızca hemen sonraki ilk kardeşi değil, ondan sonra gelen tüm kardeşleri seçmek istiyorsak tilde işaretini (~) kullanırız.
Tilde sembolü zaten sonraki kardeş birleştiricisi olarak bilinir.
<style>
div ~ p {
background-color: red;
}
</style>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>
Sözde Sınıflar ve CSS Sınıfları
Sınıf olmayan ancak sınıf gibi davranan ifadeler sözde sınıflar olarak adlandırılır.
HTML'deki hiçbir öğe için sözde sınıf tanımlamayız.
Tarayıcı kodu yorumladığında bunların var olduğunu varsayar. Bu nedenle CSS seçicilerinde sözde sınıfları kullanabiliriz.
:hover Sözde Sınıfı
Sözde sınıflar arasında :hover kuşkusuz en çok bilinendir.
Üzerine gelme (:hover), fare öğenin üzerine geldiğinde tarayıcı tarafından ilgili öğeye otomatik olarak tanımlanan bir sözde sınıftır.
Sözde sınıflar, seçici ifadesinde iki nokta (:) sembolünden sonra kullanılır.
Sözde sınıf kullanımının sözdizimi aşağıda örneklendirilmiştir.
selector:pseudo-class {
property: value;
}:hover ile Bağlantıları Biçimlendirme
Şimdi bir bağlantı oluşturalım ve üzerine geldiğinizde nasıl görüneceğine bakalım.
Uyarı: Mobil cihazlarda web ortamındaki gibi bir üzerine gelme olayı bulunmadığından bu etki CoddyKit mobil uygulamalarında görülmez.
Aşağıdaki örnekte fareyle bağlantının üzerine geldiğimizde bağlantı renginin yeşile dönüştüğünü gözlemleyelim.
<!DOCTYPE html>
<html>
<head>
<style>
.my-link{
color:red;
}
.my-link:hover{
color:green;
}
</style>
</head>
<body>
<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>
</body>
</html>:first-child sözde sınıfı
En çok kafa karıştıran sözde sınıflardan biri :first-child sınıfıdır.
Genellikle adına baktığımızda, bir öğenin ilk alt öğesini seçmek anlamına geldiğini düşünebiliriz.
Aslında bu çıkarımın doğru olmadığını belirtelim.
Bir öğenin kardeşleri arasındaki ilk öğeyi seçmek için kullanılır.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the first p element
among children of the my-box class. */
.my-box p:first-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>:last-child sözde sınıfı
last-child, first-child sözde sınıfının zıddıdır. Bir öğenin kardeşleri arasındaki son öğeyi seçmek için kullanılır.
<!DOCTYPE html>
<html>
<head>
<style>
/* Chooses the last p element
among children of the my-box class. */
.my-box p:last-child {
font-size: 24px;
}
</style>
</head>
<body>
<div class="my-box">
<p>This is first text.</p>
<p>This is second text.</p>
<p>This is third text.</p>
</div>
</body>
</html>::before sözde öğesi
Bir öğenin önüne bir şey eklemek istiyorsak ::before sözde seçicisi kullanılır.
Aşağıdaki örnekte başlık öğelerinin önüne 'Hello' içeriğini ekledik.
<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: "Hello ";
}
</style>
</head>
<body>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>
</body>
</html>::after sözde öğesi
::before sözde öğesinin karşıtı olan ::after sözde öğesi, öğeden sonra yeni içerik eklemek için kullanılır.
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: " Coddykit";
}
</style>
</head>
<body>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
</body>
</html>Liste Sözde Sınıfı
En sık kullanılan sözde sınıfları öğrendik. Ancak bunlardan onlarca tane daha vardır.
Tüm sözde sınıfların listesine aşağıdaki bağlantıdan ulaşabilirsiniz. İhtiyacınız olduğunda bunlardan herhangi birini kullanabilirsiniz.
Tebrikler
Tebrikler 🎉
Bu bölümde Seçici Türlerini öğrendik.
Bir sonraki bölümde en sık kullanılan CSS özelliklerini öğreneceğiz
Sıkça Sorulan Sorular
“Seçici türleri” dersi ücretsiz mi?
Evet — “Seçici türleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML for Kids kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML for Kids kursu toplamda 1 dersten oluşur.
“Seçici türleri” dersinde ne öğreneceğim?
Seçici türleri HTML for Kids ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML for Kids öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML for Kids, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 1 dersinin 1. dersidir.
“Seçici türleri” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML for Kids dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML for Kids dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.