0Pricing
jQuery Academy · Ders

Sözde Sınıflar ve Özel Seçiciler

:has(), :not() ve :nth-child() gibi yerleşik sözde sınıfları anlayın, ardından yeniden kullanılabilir öğe filtreleme için kendi özel seçicilerinizi oluşturmayı öğrenin.

Sözde Sınıflar ve Özel Seçiciler, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 2. 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, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.

Pseudo-Class'larla Gücü Ortaya Çıkarın

Gelişmiş Seçicilere hoş geldiniz! Bugün, seçilen elementin özel bir durumunu tanımlamak için seçicilere eklenen özel anahtar kelimeler olan pseudo-class'ları inceleyeceğiz.

  • Standart HTML attribute'ları veya adlarıyla kolayca seçilemeyen elementleri hedeflemenizi sağlarlar.
  • Bunları seçimleriniz için dinamik filtreler olarak düşünebilirsiniz.

İki nokta üst üste (:) ile başlarlar; örneğin :hover veya :first-child.

Konuma Göre Hedefleme: :nth-child()

:nth-child() sözde sınıfı, öğeleri bir kardeş öğe grubu içindeki konumlarına göre seçer. Listeleri veya tablo satırlarını biçimlendirmek için son derece kullanışlıdır.

  • :nth-child(n): n. kardeş öğeyi seçer.
  • :nth-child(odd): Tek sıradaki kardeş öğeleri seçer.
  • :nth-child(even): Çift sıradaki kardeş öğeleri seçer.

Sayma işlemi ilk kardeş öğe için 1'den başlar.

:nth-child(odd/even) ile Biçimlendirme

:nth-child(odd) ve :nth-child(even) kullanarak listedeki zebra çizgileri gibi dönüşümlü stilleri nasıl hızla uygulayabileceğinizi görelim.

Etkisini görmek için bu örneği çalıştırmayı deneyin:

$(document).ready(function() {
  // Selects odd list items and makes their text blue
  $('li:nth-child(odd)').css('color', 'blue');
  // Selects even list items and makes their text green
  $('li:nth-child(even)').css('color', 'green');
});

// HTML Structure (imagine this is in your page):
// <ul>
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
//   <li>Item 4</li>
// </ul>

Gelişmiş :nth-child() Formülleri

:nth-child() içinde An+B gibi daha karmaşık formüller kullanabilirsiniz. Burada A döngü boyutunu, B ise kaymayı ifade eder.

  • :nth-child(3n): Her 3. kardeş öğeyi seçer (3., 6., 9. ...).
  • :nth-child(3n+1): 1., 4., 7. ... kardeş öğeyi seçer.

Bu, aralıklara dayalı çok hassas seçimler yapmanızı sağlar.

:not() ile Öğeleri Hariç Tutma

:not() sözde sınıfı, belirli öğeleri bir seçimin dışında bırakmanızı sağlar. Bunu, "'intro' sınıfına sahip olanlar hariç tüm paragrafları seç" demek gibi düşünebilirsiniz.

  • Bağımsız değişken olarak başka bir seçici alır: :not(selector).
  • Karmaşık yeni seçimler yazmadan mevcut seçimleri ayrıntılandırmak için güçlü bir yöntemdir.

:not() Kullanım Örneği

İlk öğe hariç tüm liste öğelerine kenarlık eklemek istediğinizi düşünün. Bunun için :not(:first-child) kusursuzdur.

:not() kullanarak ilk öğeyi nasıl hariç tutabileceğinizi görün:

$(document).ready(function() {
  // Selects all list items that are NOT the first child
  $('li:not(:first-child)').css('border-top', '1px solid gray');
});

// HTML Structure:
// <ul>
//   <li>First Item</li>
//   <li>Second Item</li>
//   <li>Third Item</li>
// </ul>

:has() ile Üst Öğeleri Seçme

:has() sözde sınıfı benzersizdir: bağımsız değişken olarak verilen seçiciyle eşleşen en az bir öğe içeriyorsa bir öğeyi seçer.

  • Bunu, "içinde bir <p> etiketi bulunan tüm <div> öğelerini ver" diye sormaya benzetebilirsiniz.
  • Bu sayede üst öğeleri, alt öğelerinin özelliklerine göre seçebilirsiniz.

:has() ile Vurgulama

Bir resim içeren yalnızca <div> kapsayıcılarını vurgulamak istediğinizi düşünelim. :has('img') bunu verimli bir şekilde yapabilir.

Hangi div öğesinin kenarlık aldığını görmek için bu kodu çalıştırın:

$(document).ready(function() {
  // Selects divs that contain an image and adds a border
  $('div:has(img)').css('border', '2px solid red');
});

// HTML Structure:
// <div id="container1">
//   <p>Text only</p>
// </div>
// <div id="container2">
//   <img src="example.png" alt="An image">
//   <p>Text and image</p>
// </div>

Özel Seçiciler: jQuery'yi Genişletme

jQuery'nin yerleşik seçicileri yeterli olmadığında ne yapabilirsiniz? Kendi özel sözde seçicilerinizi oluşturabilirsiniz! Böylece öğeleri son derece özel, size ait mantığa göre filtreleyebilirsiniz.

  • Bunları jQuery.expr[':'] kullanarak kaydedersiniz.
  • Bu, seçim kodunuzu daha temiz ve yeniden kullanılabilir hâle getirir.

Gerçekten benzersiz filtreleme gereksinimleri için gelişmiş bir özelliktir.

Özel :contains-word() Oluşturma

Yalnızca bir alt dizeyi değil, belirli bir tam sözcüğü içeren öğeleri bulan :contains-word() adlı özel bir seçici oluşturalım.

Bu örnek, :contains-word() seçicisini tanımlar ve ardından kullanır:

$(document).ready(function() {
  // Define a custom pseudo-selector ':contains-word'
  $.expr[':']['contains-word'] = $.expr.createPseudo(function(word) {
    var pattern = new RegExp('\b' + word + '\b', 'i');
    return function(elem) {
      return pattern.test($(elem).text());
    };
  });

  // Use the custom selector to find paragraphs containing 'hello'
  $('p:contains-word("hello")').css('background-color', 'yellow');
});

// HTML Structure:
// <p>Say hello world!</p>
// <p>Another paragraph.</p>
// <p>Hello there!</p>

Sözde Sınıf Alıştırması

Aşağıdaki HTML'yi inceleyin:

<ul>
  <li class="special">One</li>
  <li>Two</li>
  <li class="special">Three</li>
  <li>Four</li>
  <li class="special">Five</li>
</ul>

Yalnızca 'Two' ve 'Four' metinlerini hedefleyecek jQuery seçicisi hangisidir?

Özet: Sözde Sınıflar ve Özel Seçiciler

Güçlü jQuery seçim tekniklerinde ustalaştınız!

  • Sözde sınıflar (:nth-child(), :not(), :has() gibi), öğeleri durumlarına veya diğer öğelerle ilişkilerine göre seçmenizi sağlar.
  • :nth-child(), formüller kullanıldığında bile öğeleri konumlarına göre hedefler.
  • :not(), öğeleri bir seçimin dışında bırakır.
  • :has(), üst öğeleri alt öğelerine göre seçer.
  • Son derece özel filtreleme için jQuery.expr[':'] kullanarak kendi özel sözde seçicilerinizi bile oluşturabilirsiniz.

DOM hedeflemenizi geliştirmek için bunları uygulamaya devam edin!

Sıkça Sorulan Sorular

“Sözde Sınıflar ve Özel Seçiciler” dersi ücretsiz mi?

Evet — “Sözde Sınıflar ve Özel Seçiciler” 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 jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.

“Sözde Sınıflar ve Özel Seçiciler” dersinde ne öğreneceğim?

:has(), :not() ve :nth-child() gibi yerleşik sözde sınıfları anlayın, ardından yeniden kullanılabilir öğe filtreleme için kendi özel seçicilerinizi oluşturmayı öğrenin. jQuery Academy 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.

jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, 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, 3 dersinin 2. dersidir.

“Sözde Sınıflar ve Özel Seçiciler” 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 jQuery Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her jQuery Academy 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.

Bu kursun tüm dersleri

  1. Gelişmiş Öznitelik Seçicileri
  2. Sözde Sınıflar ve Özel Seçiciler
  3. Etkili DOM Gezinme Teknikleri
← jQuery Academy Sayfasına Dön