Sözde sınıflar seçmek için kullanılabilir belirli eleman listeden. Bu derste, nth-child sözde sınıfından, bu sözde sınıfla neler yaratabileceğinizden ve nasıl yararlı olabileceğinden bahsedeceğiz. nth-child sözde sınıfı, ortak özelliklere sahip bir grup öğe seçmenize olanak tanır. En yaygın olarak bir gruptan tek veya çift öğeleri seçmek için kullanılır. Genellikle tek ve çift satırlara farklı arka plan renkleri atayarak tabloyu zebra gibi göstermek için kullanılır.

Tr: nth-child (tek) (// arka plan rengi) tr: nth-child (çift) (// başka bir arka plan rengi)

Başka bir sözde sınıf: nth-child, ortak bir özelliğe sahip öğeleri gruplara ayırmanıza ve ardından aşağıdaki sözdizimini kullanarak her gruptan belirli bir öğe seçmenize olanak tanır:

Tr: nth-child (an + b) ()

Buraya a gruptaki öğelerin sayısını belirler ve B gruptan hangi elemanın seçileceğini belirler. değerini kullanırsak 2n + 1, sonra elemanlar ikişerli gruplara bölünecek ve her grubun ilk elemanları, yani tek sıra numaralı elemanlar seçilecektir. değerini kullanırsak 2n + 2, sonra öğeler tekrar ikili gruplara bölünecek, ancak şimdi her grubun ikinci öğeleri, yani çift sıra numaralı öğeler seçilecek.

Örnek olarak, nth-child sözde sınıfını anlamak için, onu her dördüncü öğeyi, yani dördüncü, sekizinci, on ikinci, on altıncı vb. seçmek için kullanacağız. Bunu yapmak için öğeleri dörtlü gruplara ayırın. ve ardından her dördüncü öğeyi seçin.

Tr: nth-child (4n + 4) (// her dördüncü öğeye stil ver)

Aşağıda on öğeden oluşan bir liste bulunmaktadır ve vurgulamak istediğimiz öğeleri seçmek için: nth-child,: first-child ve: last-child sözde sınıflarını kullanacağız.

Tek bir öğe seçmek için CSS sözde sınıfını kullanma: nth-child

nth-child sözde sınıfını bir sayıya ayarlayarak, grubun hangi çocuğuna başvuracağınızı seçebilirsiniz:

1. öğe
2. öğe
3. öğe
4. öğe
eleman 5
6. öğe
eleman 7
Öğe 8
Öğe 9
10. öğe

#selector_example li: nth-child (4) (yazı tipi boyutu: 150

CSS sözde sınıfını kullanma: nth-child ilk beş öğe hariç tümünü seçmek için

Sözde sınıfını ayarlarsanız: nth-child formun bir değerine + numara, bu sıra numarasına sahip öğeyle başlayan tüm öğeleri seçebilirsiniz:

1. öğe
2. öğe
3. öğe
4. öğe
eleman 5
6. öğe
eleman 7
Öğe 8
Öğe 9
10. öğe

#selector_example li: nth-child (n + 6) (yazı tipi boyutu: 150 %; yazı tipi ağırlığı: kalın; yeşil renk; )

Yalnızca ilk beş öğeyi seçmek için CSS sözde sınıfını kullanma: nth-child

Sözde sınıfı: nth-child'i negatif olarak ayarladığımızda + sayı, bu sıra ile elemandan önceki tüm elemanları seçiyoruz:

1. öğe
2. öğe
3. öğe
4. öğe
eleman 5
6. öğe
eleman 7
Öğe 8
Öğe 9
10. öğe

#selector_example li: nth-child (-n + 5) (yazı tipi boyutu: 150 %; yazı tipi ağırlığı: kalın; yeşil renk; )

Her üçüncü öğeyi seçmek için CSS sözde sınıfını kullanma: nth-child

nth-child sözde sınıfı, dizide kaç öğe olduğunu ve istenen öğenin sıra numarasını belirterek bir öğe dizisini seçmek için kullanılabilir. değeri ayarlarsanız 3n + 1, ilkinden başlayarak her üç öğeden biri seçilecektir:

1. öğe
2. öğe
3. öğe
4. öğe
eleman 5
6. öğe
eleman 7
Öğe 8
Öğe 9
10. öğe

#selector_example li: nth-child (3n + 1) (yazı tipi boyutu: 150 %; yazı tipi ağırlığı: kalın; yeşil renk; )

Yalnızca tek öğeleri seçmek için CSS sözde sınıfını kullanma: nth-child

Tüm tek sayılı öğeleri seçmek için: nth-child sözde sınıfını tek (tek) olarak ayarlayabilirsiniz. Yani birinci, üçüncü, beşinci, yedinci, dokuzuncu vb. unsurlardır. Tablonun bitişik sıraları için renk ayarlamak çok uygundur.

1. öğe
2. öğe
3. öğe
4. öğe
eleman 5
6. öğe
eleman 7
Öğe 8
Öğe 9
10. öğe

#selector_example li: nth-child (tek) (yazı tipi boyutu: 150 %; yazı tipi ağırlığı: kalın; yeşil renk; )

Yalnızca eşit öğeleri seçmek için CSS sözde sınıfını kullanma: nth-child

Bu örnek, sonuncusunun aynısını göstermektedir, ancak bu sefer çift sıralı sayılara sahip tüm öğeler seçilmiştir. Yani ikinci, dördüncü, altıncı, sekizinci, onuncu vb. unsurlar:

1. öğe
2. öğe
3. öğe
4. öğe
eleman 5
6. öğe
eleman 7
Öğe 8
Öğe 9
10. öğe

#selector_example li: nth-child (çift) (yazı tipi boyutu: 150 %; yazı tipi ağırlığı: kalın; yeşil renk; )

CSS sözde sınıfını kullanma: ilk öğeyi seçmek için birinci çocuk

Başka bir sözde sınıf: first-child ilk öğeyi seçecektir:

1. öğe
2. öğe
3. öğe
4. öğe
eleman 5
6. öğe
eleman 7
Öğe 8
Öğe 9
10. öğe

#selector_example li: birinci çocuk (yazı tipi boyutu: 150 %; yazı tipi ağırlığı: kalın; yeşil renk; )

CSS sözde sınıfını kullanma: son öğeyi seçmek için son çocuk

First-child sözde sınıfına ek olarak, bir grup öğeden son öğeyi seçecek olan: last-child sözde sınıfı da vardır:

1. öğe
2. öğe
3. öğe
4. öğe
eleman 5
6. öğe
eleman 7
Öğe 8
Öğe 9
10. öğe

#selector_example li: son çocuk (yazı tipi boyutu: 150 %; yazı tipi ağırlığı: kalın; yeşil renk; )

Sondan bir önceki öğeyi seçmek için CSS sözde sınıfını kullanma: nth-last-child

Sondan saymaya başlamak için: last-child ve: nth-child sözde sınıflarının yeteneklerini birleştiren: nth-last-child sözde sınıfını da kullanabilirsiniz. Yani grubun sonundan sıra sayılarını sayarak bir eleman seçebilirsiniz, örneğin on elemanlı bir grupta sondan ikinci elemanı seçebilirsiniz:

1. öğe
2. öğe
3. öğe
4. öğe
eleman 5
6. öğe
eleman 7
Öğe 8
Öğe 9
10. öğe

#selector_example li: nth-son-child (2) (yazı tipi boyutu: 150 %; yazı tipi ağırlığı: kalın; yeşil renk; )

nth-child sözde sınıfının yeteneklerine göz atın "

Açıklama

nth-child sözde sınıfı, öğe ağacındaki numaralandırmaya dayalı olarak öğelere stil vermek için kullanılır.

Sözdizimi

eleman: nth-child (tek | çift |<число> | <выражение>) {...}

Değerler

tek Tüm tek öğe numaraları. çift ​​Tüm çift eleman numaraları. sayı Çocuğun ebeveynine göre sıra numarası. Numaralandırma 1'den başlar, bu listedeki ilk öğe olacaktır. ifade Bir + b olarak belirtilir, burada a ve b tam sayılardır ve n otomatik olarak 0, 1, 2 ... değerini alan bir sayaçtır.

a sıfıra eşitse, yazılmaz ve kayıt b'ye kısaltılır. b sıfıra eşit ise o da belirtilmez ve ifade an şeklinde yazılır. a ve b negatif sayılar olabilir, bu durumda artı işareti eksi olarak değişir, örneğin: 5n-1.

A ve b için negatif değerler kullanılarak bazı sonuçlar negatif veya sıfır da olabilir. Ancak, madde numaralandırmasının 1'den başlaması nedeniyle maddeler sadece pozitif değerlerden etkilenir.

Tablo 1, bazı olası ifadeleri ve anahtar sözcükleri listeler ve ayrıca hangi öğe numaralarının kullanılacağını belirtir.

HTML5 CSS3 IE Cr Op Sa Fx

	2134	2135	2136	2137	2138
Sıvı yağ	16	34	62	74	57
Altın	4	69	72	56	47
Odun	7	73	79	34	86
Taşlar	23	34	88	53	103

V bu örnek nth-child sözde sınıfı, tablonun ilk satırının stilini değiştirmek ve tüm çift sayılı satırları renklendirmek için kullanılır (Şekil 1).

Bloguma hoş geldiniz. Bugün css'de ilk ebeveyn elemanın nasıl seçileceği konusunu yazmak istiyorum çünkü bu daha az stil sınıfı kullanmanıza olanak sağlıyor.

Sözde sınıflar: birinci çocuk ve birinci tip fark nedir?

Css'deki ana kapsayıcıdaki ilk öğeye atıfta bulunmak için iki sözde sınıf icat edildi. Anlamanız için hemen her şeyi bir örnekle düşünmeyi öneriyorum:

Diyelim ki böyle bir işaretlememiz var. Amaç, ilk paragrafa atıfta bulunmak ve ona sınıf eklemeden diğerlerinden ayrı stil vermektir. Bunu şu şekilde yapabilirsiniz:

#wrapper p: birinci çocuk (
Kırmızı renk;
}

İlk paragrafın rengi kırmızıya dönecek, kontrol edebilirsiniz.

#wrapper p: türünün ilk örneği (
kırmızı renk;
}

Aynısı olacak. Peki fark nedir? Ve türün birincisi sözde sınıfın, türüne göre ebeveynin ilk öğesini araması ve bulması ve birinci çocuğun hiçbir şey aramaması gerçeğinden oluşur - yalnızca ebeveynin ilk öğesini alır. ve eğer bir paragrafsa, ona stiller uygular. Değilse, hiçbir şey seçilmeyecek ve uygulanmayacaktır.

Şimdi düşünün: Bu durumda türünün ilk örneği çalışacak mı? Evet, çünkü öğenin türünü hesaba katar ve tüm öğelerin ilkini değil, ilk paragrafı seçer. İlk çocuk çalışacak mı? Dene. Paragraf üst öğedeki ilk öğe olmadığı için başarısız olur.

Şahsen ben bu sözde sınıflar arasındaki farkı hemen anlamadım ve bir süre kafam karıştı ama şimdi umarım normal bir şekilde anlatabilmişimdir.

Bir diğer önemli detay

Öğeler tam olarak ana öğeden sayılır, bu nedenle şöyle belirtirseniz:

Li: türünün ilk örneği (
…
}

Ardından gövde etiketindeki (yani tüm sayfadaki) listelerin ilk öğeleri seçilecektir. Bu nedenle, herhangi bir listede ilk öğe farklı şekilde biçimlendirilecektir.
Böyle yazarsanız:

#sidebar li: türünün ilk örneği (
…
}

Ardından, kenar çubuğundaki, yani web sitemizdeki yan sütundaki listelerin yalnızca ilk öğeleri seçilecektir.

Hakkında yazdığım çeşitli seçicileri kullanarak bir web sayfasındaki hemen hemen her öğeye ulaşabilirsiniz. Bu yazıda, css'de nth-child sözde sınıfı ile nasıl çalışılacağı hakkında daha fazla bilgi edinebilir ve size eleman seçimi açısından seçenekler sunar.

Bu arada, karşıt sözde sınıflardan bahsetmeyi unuttum - son çocuk (ve sırasıyla türün son). Ana kapsayıcıdan son öğeyi seçmenize izin verirler.

Pratikte nerede kullanabilirsiniz?

Bu sözde sınıflar hakkında yazıyorum çünkü aktif olarak düzende kullanılıyorlar. css kullanarak... Burada sayfada, örneğin bir blok benzer gönderiler, yorumlar veya başka bir şey var. Ve ilk öğesini özel bir şekilde tasarlama fikriniz var. Ya da belki sonuncusu. Her neyse, herkes yapabilir.

İstediğiniz elemanın saklandığı bloğun adını bulmanız yeterlidir. Diyelim ki popüler plaklarla uğraşıyoruz. Ana kapsayıcının popüler adlı bir sınıfı vardır. Sonra şöyle yazıyoruz:

Popüler li: türünün ilk örneği (
Üst dolgu: 20 piksel;
}

İşte bu, listenin ilk maddesi yukarıdan girintiliydi, ancak stillere istediğinizi ekleyebilirsiniz.

İşte başka bir örnek. Gövde etiketinde yalnızca üç özdeş gri blok var. Bunu şöyle yazalım.

CSS nth-child, sayısal bir ifade kullanarak öğeleri seçmek için kullanılan sözde bir sınıftır. Sözdizimi ilk bakışta biraz kafa karıştırıcı görünebilir.

Bu yazıda şunlara bakacağız:

• farklı kullanım yolları: nth-child;
• daha esnek seçici: türünün ilk örneği;
• ve ilgili seçicileri: nth-son-child ve: nth-son-of-type.

: türün sonuncusu

: türün sonuncusu, belgedeki konumları cebirsel ifade tarafından açıklanan modelle eşleşiyorsa alt öğeleri seçer.

Türün sonuncusu seçici şuna benzer:

li: nth-child (ifade); ()

"İfade", çift veya tek anahtar sözcükleri, bir tamsayı veya a ve b'nin pozitif veya negatif tam sayılar olduğu a + b gibi bir formülle temsil edilebilir.

CSS sözde sınıfı olarak nth çocuğu, bir dizi farklı öğeyi seçmek için kullanılabilir. Daha açık hale getirmek için birkaç örneğe bakalım.

12 maddelik madde işaretli bir listem var. Bir modelden belirli bir öğeyi veya öğe kümesini seçmek için nth-child'i nasıl kullanabileceğinizi görelim:

• irfan ipsum
• irfan ipsum
• irfan ipsum
• irfan ipsum
• irfan ipsum
• irfan ipsum
• irfan ipsum
• irfan ipsum
• irfan ipsum
• irfan ipsum
• irfan ipsum
• irfan ipsum

Listedeki üçüncü öğeyi seçmek için li: nth-child (3) belirtmeniz gerekir. Tüm çift öğeleri seçmek için çift anahtar sözcüğünü kullanabilirsiniz. Tersine, tüm tek numaralı öğeleri seçmek için: nth-child (tek) öğesini kullanabilirsiniz.

Her 3'te bir CSS nth çocuğu - li: nth-child (3n) belirtin. İlk dört öğeyi seçmek için li: nth-child (-n + 4) kullanın. İlk dört öğe hariç tümünü seçmek için li: nth-child (n + 5) kullanabilirsiniz.

ifade bir + b

Tek anahtar sözcüğünü kullanmanın bir alternatifi, 2n + 1 ifadesini kullanmaktır. Ama nasıl çalışıyor?

an + b biçimindeki bir ifade, a ve b için sıfır olmayan değerler içerdiğinde, çocuklar gruplara ayrılır. İfade 2n + 1 ise, çocuklar ikişerli gruplara ayrılır. Gruptaki her öğeye 1'den başlayan bir dizin atanır. Her gruptaki karşılık gelen eleman indeks numarası b'dir. Örneğimizde, bu ilk öğe olacak.

İfade 3n + 2 ise, öğeler üçe ayrılır ve her gruptaki ikinci öğe ifadeyle eşleşir.

b negatifse, gruptaki eşleşen öğe b dizinindeki öğedir. Ancak indeks 1'den ters yönde sayılır. Bu durumda, karşılık gelen eleman buna değil, önceki gruba ait olacaktır.

CSS nth alt öğesindeki çift anahtar sözcüğü 2n olarak ifade edilebilir. Bu durumda, b için bir değerimiz yoktur, dolayısıyla a indeksli grubun her bir elemanı seçilir; 2n her ikinci öğeyi seçer, 3n her üçte bir seçer, 4n her dörtte bir seçer, vb.

Şahsen, çocukları gruplara ayırma ve her grup için eşleşme indeksi bulma kavramını çok kafa karıştırıcı buluyorum. Her ne kadar CSS Seçici Spesifikasyonu onları böyle tanımlıyor olsa da.

Her n'inci öğeyi daha çok bulma kavramını seviyorum - her 2'nci, 3'üncü veya 4'üncü vb. Ve sonra ifadenin ikinci kısmının ofset olduğunu hayal etmek benim için daha kolay.

2n+1 durumunda bu ifadeyi şöyle okuyorum: “ Her ikinci öğeyi bulun ve seçimi 1 aşağı taşıyın».

İfade 3n-5 ise şu şekilde okunur: “ Her üç öğeden birini bulun ve seçimi 5 yukarı taşıyın».

Diğer seçiciler: nth-child

: nth-child'in karşılık gelen bir sözde sınıfı vardır: nth-last-child, bu da tam tersi şekilde çalışır.

li: nth-last-child (3n) son çocuktan başlar ve listenin sonundan itibaren her üçüncü öğeyle eşleşerek onları geriye doğru işler.

Bu sözde sınıf daha az yaygındır. Ancak, genellikle ilk veya son çocuğu seçmek gerekir. Bu, nth-child (1) veya: nth-last-child (1) ile yapılabilir, ancak bu yöntem: first-child ve: last-child sözde sınıfları kadar yaygın değildir. Bununla birlikte, yalnızca: birinci çocuk IE8'de çalışır, oysa: son çocuk ve: nth seçiciler çalışmaz.

: nth-of-tür

Genellikle memnun olmadığım şey, n'inci alt CSS sözde sınıfının çocukları dizine göre seçmesi ve öğe türünü hesaba katmamasıdır.

Aşağıdaki örneği düşünün.

lorem ipsum;

Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue;

Nuc sed turpis. Donec pozuere vulputate arku;

Başlık, alt başlık ve birkaç paragraftan oluşan bir bölüm var. İlk paragrafın 1.5em artırılmış yazı tipi boyutuyla biraz öne çıkmasını istiyorum.

Bu bölümdeki ilk paragraf için ek stil ayarlamanız gerektiğinden, p: first-child kodu bölümünü kullanmayı deneyebilirsiniz. Ancak bölümün ilk çocuğu h1 olduğundan bu işe yaramaz. Bu durumda, türünün ilk seçicisini kullanmanız gerekir.

Bu türden birkaç seçici vardır -: türün ilki,: türün sonuncusu,: türün nth'i ve: türün sonuncusu. Aynı şekilde davranırlar: nth-child, ancak belirli bir türdeki öğelerin n'inci örneklerini seçin.