{"id":36557,"date":"2025-12-19T21:41:01","date_gmt":"2025-12-19T18:41:01","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=36557"},"modified":"2025-12-19T21:41:01","modified_gmt":"2025-12-19T18:41:01","slug":"css-sozde-siniflarini-karsilastirmak-nth-child-ve-nth-of-type","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-sozde-siniflarini-karsilastirmak-nth-child-ve-nth-of-type\/","title":{"rendered":"CSS S\u00f6zde S\u0131n\u0131flar\u0131n\u0131 Kar\u015f\u0131la\u015ft\u0131rmak: nth-child ve nth-of-type"},"content":{"rendered":"

<\/p>\n

CSS S\u00f6zde S\u0131n\u0131flar\u0131n\u0131 Kar\u015f\u0131la\u015ft\u0131rmak: nth-child ve nth-of-type<\/h2>\n

Web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olan CSS, bir belgenin g\u00f6rsel sunumunu tan\u0131mlamak i\u00e7in g\u00fc\u00e7l\u00fc mekanizmalar sunar. Bu mekanizmalar aras\u0131nda, belirli elemanlar\u0131 konumlar\u0131na veya durumlar\u0131na g\u00f6re hedeflememizi sa\u011flayan s\u00f6zde s\u0131n\u0131flar (pseudo-classes) \u00f6zel bir yere sahiptir. :hover<\/code>, :focus<\/code>, :first-child<\/code> gibi s\u00f6zde s\u0131n\u0131flar, dinamik ve etkile\u015fimli kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmada vazge\u00e7ilmezdir. Ancak, bir eleman\u0131n bir \u00fcst eleman i\u00e7indeki konumuna g\u00f6re stil uygulamak s\u00f6z konusu oldu\u011funda, iki g\u00fc\u00e7l\u00fc ve s\u0131kl\u0131kla kar\u0131\u015ft\u0131r\u0131lan s\u00f6zde s\u0131n\u0131f devreye girer: nth-child<\/code> ve nth-of-type<\/code>.<\/p>\n

Bu iki s\u00f6zde s\u0131n\u0131f, bir eleman grubunun i\u00e7indeki belirli bir eleman\u0131, bir matematiksel form\u00fcl veya anahtar kelime kullanarak hedeflememizi sa\u011flar. Her ikisi de elemanlar\u0131n s\u0131ral\u0131 konumuna dayan\u0131r, ancak bu s\u0131ralamay\u0131 nas\u0131l hesaplad\u0131klar\u0131 ve hangi elemanlar\u0131 dikkate ald\u0131klar\u0131 konusunda temel bir fark vard\u0131r. Bu makale, nth-child<\/code> ve nth-of-type<\/code> aras\u0131ndaki ayr\u0131mlar\u0131 derinlemesine inceleyecek, \u00e7al\u0131\u015fma prensiplerini detayland\u0131racak, pratik kullan\u0131m senaryolar\u0131n\u0131 \u00f6rneklerle a\u00e7\u0131klayacak ve geli\u015ftiricilerin ne zaman hangisini tercih etmeleri gerekti\u011fi konusunda net bir rehber sunacakt\u0131r. Amac\u0131m\u0131z, bu g\u00fc\u00e7l\u00fc CSS ara\u00e7lar\u0131n\u0131 tam olarak anlaman\u0131z\u0131 ve projelerinizde bilin\u00e7li kararlar vermenizi sa\u011flamakt\u0131r.<\/p>\n

Temel Konseptler: CSS S\u00f6zde S\u0131n\u0131flar\u0131<\/h3>\n

CSS s\u00f6zde s\u0131n\u0131flar\u0131, bir eleman\u0131n normal durumunu veya konumunu temel alan stil kurallar\u0131 tan\u0131mlamam\u0131za olanak tan\u0131yan anahtar kelimelerdir. Normalde, bir CSS se\u00e7icisi bir eleman\u0131 do\u011frudan s\u0131n\u0131f\u0131na, kimli\u011fine veya etiket ad\u0131na g\u00f6re hedefler. Ancak s\u00f6zde s\u0131n\u0131flar, eleman\u0131n belirli bir durumunu (\u00f6rne\u011fin, \u00fczerine gelindi\u011finde :hover<\/code>), bir \u00fcst eleman i\u00e7indeki konumunu (\u00f6rne\u011fin, ilk \u00e7ocuk :first-child<\/code>) veya belirli bir \u00f6zelli\u011fini (\u00f6rne\u011fin, i\u015faretli bir onay kutusu :checked<\/code>) temel alarak daha dinamik se\u00e7imler yapmam\u0131z\u0131 sa\u011flar.<\/p>\n

S\u00f6zde s\u0131n\u0131flar, CSS se\u00e7icilerinin g\u00fcc\u00fcn\u00fc \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. \u00d6rne\u011fin, bir liste \u00f6\u011fesinin \u00fczerine gelindi\u011finde rengini de\u011fi\u015ftirmek i\u00e7in JavaScript kullanmak yerine :hover<\/code> s\u00f6zde s\u0131n\u0131f\u0131n\u0131 kullanabiliriz. Benzer \u015fekilde, bir formdaki ilk giri\u015f alan\u0131n\u0131 \u00f6zel olarak stilize etmek i\u00e7in :first-child<\/code> veya :first-of-type<\/code> gibi yap\u0131sal s\u00f6zde s\u0131n\u0131flar\u0131 kullanabiliriz. Bu, daha temiz, daha s\u00fcrd\u00fcr\u00fclebilir ve daha performansl\u0131 CSS kodlar\u0131 yazmam\u0131z\u0131 sa\u011flar.<\/p>\n

nth-child<\/code> ve nth-of-type<\/code> da bu yap\u0131sal s\u00f6zde s\u0131n\u0131flar kategorisine girer. Her ikisi de bir eleman\u0131n, bir \u00fcst eleman\u0131n do\u011frudan \u00e7ocuklar\u0131 aras\u0131ndaki s\u0131ras\u0131na g\u00f6re hedeflenmesini sa\u011flar. Bu, \u00f6zellikle tekrarlayan eleman gruplar\u0131 (listeler, tablolar, gridler) \u00fczerinde desenler olu\u015fturmak veya belirli elemanlar\u0131 \u00f6ne \u00e7\u0131karmak istedi\u011fimizde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r. Ancak, bu iki s\u00f6zde s\u0131n\u0131f\u0131n n\u00fcanslar\u0131n\u0131 anlamadan yanl\u0131\u015f se\u00e7imler yapmak, beklenmedik stil sonu\u00e7lar\u0131na yol a\u00e7abilir ve hata ay\u0131klama s\u00fcrecini zorla\u015ft\u0131rabilir.<\/p>\n

nth-child Nedir?<\/h3>\n

nth-child<\/code> s\u00f6zde s\u0131n\u0131f\u0131, bir \u00fcst eleman\u0131n t\u00fcm<\/em> \u00e7ocuklar\u0131 aras\u0131nda belirli bir konumda bulunan eleman\u0131 se\u00e7mek i\u00e7in kullan\u0131l\u0131r. Se\u00e7im yaparken, \u00fcst eleman\u0131n t\u00fcm \u00e7ocuklar\u0131 say\u0131l\u0131r ve hedef eleman\u0131n s\u0131ras\u0131 bu genel say\u0131ma g\u00f6re belirlenir. Ancak burada \u00f6nemli bir ayr\u0131nt\u0131 vard\u0131r: nth-child<\/code> se\u00e7icisi, belirtilen etiket ad\u0131n\u0131 (veya se\u00e7iciyi) ve<\/em> bu etiketin genel \u00e7ocuk s\u0131ras\u0131ndaki konumunu ayn\u0131 anda do\u011frulamal\u0131d\u0131r.<\/p>\n

S\u00f6zdizimi ve Parametreler<\/h4>\n

nth-child<\/code> s\u00f6zdizimi \u015fu \u015fekildedir:<\/p>\n

selector:nth-child(an+b) {\n  \/ Stil kurallar\u0131 <\/em>\/\n}<\/code><\/pre>\n
*   selector<\/code>: Stil uygulanacak eleman\u0131n etiket ad\u0131, s\u0131n\u0131f\u0131 veya kimli\u011fi olabilir. \u00d6rne\u011fin, li<\/code>, p<\/code>, .item<\/code>.
\n*   an+b<\/code>: Bir eleman\u0131n \u00fcst eleman\u0131 i\u00e7indeki konumunu belirleyen bir form\u00fcld\u00fcr.
\n    *   n<\/code>: Her zaman 0’dan ba\u015flayan bir saya\u00e7t\u0131r (0, 1, 2, 3, …).
\n    *   a<\/code>: n<\/code> ile \u00e7arp\u0131lan bir tam say\u0131d\u0131r. Her a<\/code> eleman\u0131nda bir se\u00e7im yap\u0131lmas\u0131n\u0131 sa\u011flar.
\n    *   b<\/code>: Form\u00fcle eklenen veya \u00e7\u0131kar\u0131lan bir ofset tam say\u0131d\u0131r.
\n    *   Form\u00fcl\u00fcn sonucu, eleman\u0131n \u00fcst eleman i\u00e7indeki 1’den ba\u015flayan s\u0131ras\u0131n\u0131 temsil etmelidir.<\/p>\n
Yayg\u0131n an+b<\/code> form\u00fclleri ve \u00f6zel anahtar kelimeler:<\/p>\n
*   nth-child(1)<\/code>: \u0130lk \u00e7ocuk eleman\u0131 se\u00e7er (ayn\u0131 zamanda :first-child<\/code> ile e\u015fde\u011ferdir).
\n*   nth-child(2)<\/code>: \u0130kinci \u00e7ocuk eleman\u0131 se\u00e7er.
\n   nth-child(n)<\/code>: T\u00fcm \u00e7ocuk elemanlar\u0131 se\u00e7er (pratikte <\/em><\/code> veya selector<\/code> ile ayn\u0131d\u0131r).
\n*   nth-child(n+3)<\/code>: \u00dc\u00e7\u00fcnc\u00fc \u00e7ocuktan ba\u015flayarak t\u00fcm \u00e7ocuk elemanlar\u0131 se\u00e7er (3, 4, 5, …).
\n*   nth-child(-n+3)<\/code>: \u0130lk \u00fc\u00e7 \u00e7ocuk eleman\u0131n\u0131 se\u00e7er (1, 2, 3).
\n*   nth-child(2n)<\/code> veya nth-child(even)<\/code>: \u00c7ift s\u0131radaki \u00e7ocuk elemanlar\u0131 se\u00e7er.
\n*   nth-child(2n+1)<\/code> veya nth-child(odd)<\/code>: Tek s\u0131radaki \u00e7ocuk elemanlar\u0131 se\u00e7er.<\/p>\n
Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h4>\n
nth-child<\/code>‘\u0131n \u00e7al\u0131\u015fma prensibi genellikle yanl\u0131\u015f anla\u015f\u0131l\u0131r. Bir div<\/code> i\u00e7inde birden fazla farkl\u0131 t\u00fcrde eleman oldu\u011funu varsayal\u0131m:<\/p>\n
\n  
1. Paragraf<\/p>\n  1. Span<\/span>\n  
2. Paragraf<\/p>\n  1. Ba\u011flant\u0131<\/a>\n  
3. Paragraf<\/p>\n<\/div><\/code><\/pre>\n
\u015eimdi \u015fu CSS kural\u0131n\u0131 uygulayal\u0131m:<\/p>\n
.container p:nth-child(2) {\n  color: red;\n}<\/code><\/pre>\n
Beklentimiz genellikle “2. Paragraf”\u0131n k\u0131rm\u0131z\u0131 olmas\u0131d\u0131r. Ancak, bu kural hi\u00e7bir eleman\u0131 k\u0131rm\u0131z\u0131 yapmayacakt\u0131r. Neden mi?<\/p>\n
nth-child(2)<\/code> se\u00e7icisi \u015fu ad\u0131mlar\u0131 izler:<\/p>\n
1.  \u00dcst eleman olan .container<\/code> i\u00e7indeki t\u00fcm<\/em> \u00e7ocuk elemanlar\u0131 say\u0131l\u0131r.
\n    *   1. \u00e7ocuk: <\/p>\n
<\/code>
\n    *   2. \u00e7ocuk: <\/code>
\n    *   3. \u00e7ocuk: <\/p>\n
<\/code>
\n    *   4. \u00e7ocuk: <\/code>
\n    *   5. \u00e7ocuk: <\/p>\n
<\/code>
\n2.  nth-child(2)<\/code> ifadesi, genel \u00e7ocuk listesindeki ikinci eleman\u0131 i\u015faret eder. Bu \u00f6rnekte, ikinci eleman bir <\/code> etiketidir.
\n3.  Se\u00e7icinin ilk k\u0131sm\u0131 (p<\/code>), bu ikinci eleman\u0131n bir p<\/code> etiketi olup olmad\u0131\u011f\u0131n\u0131 kontrol eder. \u0130kinci eleman bir <\/code> oldu\u011fu i\u00e7in, p<\/code> se\u00e7icisiyle e\u015fle\u015fmez.
\n4.  Sonu\u00e7 olarak, hi\u00e7bir elemana stil uygulanmaz.<\/p>\n
E\u011fer \u015fu kural\u0131 uygulasayd\u0131k:<\/p>\n
.container span:nth-child(2) {\n  color: blue;\n}<\/code><\/pre>\n
Bu durumda, “1. Span” mavi renkte olurdu \u00e7\u00fcnk\u00fc genel \u00e7ocuk listesindeki ikinci eleman bir <\/code>‘dir ve se\u00e7icimiz de bir span<\/code> ar\u0131yor.<\/p>\n
\u00d6zetle, nth-child(X)<\/code> \u00f6nce \u00fcst eleman\u0131n X. \u00e7ocu\u011funu bulur, ard\u0131ndan bu X. \u00e7ocu\u011fun se\u00e7iciyle (p<\/code>, span<\/code>, vb.) e\u015fle\u015fip e\u015fle\u015fmedi\u011fini kontrol eder. E\u011fer e\u015fle\u015fmezse, stil uygulanmaz. Bu, nth-child<\/code>‘\u0131n “t\u00fcm karde\u015fler aras\u0131nda X. s\u0131rada olan ve ayn\u0131 zamanda benim tipimde olan” anlam\u0131na geldi\u011fi anlam\u0131na gelir.<\/p>\n
nth-of-type Nedir?<\/h3>\n
nth-of-type<\/code> s\u00f6zde s\u0131n\u0131f\u0131, nth-child<\/code>‘a benzer \u015fekilde bir \u00fcst eleman\u0131n \u00e7ocuklar\u0131 aras\u0131nda belirli bir konumda bulunan eleman\u0131 se\u00e7mek i\u00e7in kullan\u0131l\u0131r. Ancak, nth-of-type<\/code> se\u00e7imi yaparken, \u00fcst eleman\u0131n belirli bir tipteki<\/em> \u00e7ocuklar\u0131n\u0131 sayar. Yani, sadece se\u00e7icinin belirtti\u011fi etiket tipindeki elemanlar dikkate al\u0131n\u0131r ve s\u0131ralama bu filtrelenmi\u015f liste \u00fczerinden yap\u0131l\u0131r.<\/p>\n
S\u00f6zdizimi ve Parametreler<\/h4>\n
nth-of-type<\/code> s\u00f6zdizimi nth-child<\/code> ile ayn\u0131d\u0131r:<\/p>\n
selector:nth-of-type(an+b) {\n  \/ Stil kurallar\u0131 <\/em>\/\n}<\/code><\/pre>\n
   selector<\/code>: Stil uygulanacak eleman\u0131n etiket ad\u0131 olmal\u0131d\u0131r (s\u0131n\u0131f veya kimlik burada do\u011frudan kullan\u0131lamaz, \u00e7\u00fcnk\u00fc nth-of-type<\/code> eleman\u0131n <\/em>tipine* odaklan\u0131r). \u00d6rne\u011fin, li<\/code>, p<\/code>.
\n*   an+b<\/code>: nth-child<\/code> ile ayn\u0131 \u015fekilde \u00e7al\u0131\u015fan bir form\u00fcld\u00fcr.<\/p>\n
Ayn\u0131 an+b<\/code> form\u00fclleri ve anahtar kelimeler nth-of-type<\/code> i\u00e7in de ge\u00e7erlidir: 1<\/code>, 2<\/code>, n<\/code>, n+3<\/code>, -n+3<\/code>, 2n<\/code> (even), 2n+1<\/code> (odd).<\/p>\n
Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h4>\n
nth-of-type<\/code>‘\u0131n \u00e7al\u0131\u015fma prensibi, nth-child<\/code>‘dan daha sezgisel olabilir, \u00f6zellikle elemanlar kar\u0131\u015f\u0131ksa. Yukar\u0131daki ayn\u0131 HTML yap\u0131s\u0131n\u0131 kullanal\u0131m:<\/p>\n
\n  
1. Paragraf<\/p>\n  1. Span<\/span>\n  
2. Paragraf<\/p>\n  1. Ba\u011flant\u0131<\/a>\n  
3. Paragraf<\/p>\n<\/div><\/code><\/pre>\n
\u015eimdi \u015fu CSS kural\u0131n\u0131 uygulayal\u0131m:<\/p>\n
.container p:nth-of-type(2) {\n  color: red;\n}<\/code><\/pre>\n
Bu durumda, “2. Paragraf” k\u0131rm\u0131z\u0131 renkte olacakt\u0131r. Neden mi?<\/p>\n
nth-of-type(2)<\/code> se\u00e7icisi \u015fu ad\u0131mlar\u0131 izler:<\/p>\n
1.  \u00d6ncelikle, se\u00e7icide belirtilen eleman tipine (p<\/code>) g\u00f6re \u00fcst eleman .container<\/code> i\u00e7indeki \u00e7ocuk elemanlar filtrelenir.
\n    *   Filtrelenmi\u015f <\/p>\n
<\/code> elemanlar\u0131:
\n        *   1. <\/p>\n
<\/code>: “1. Paragraf”
\n        *   2. <\/p>\n
<\/code>: “2. Paragraf”
\n        *   3. <\/p>\n
<\/code>: “3. Paragraf”
\n2.  nth-of-type(2)<\/code> ifadesi, bu filtrelenmi\u015f <\/p>\n
<\/code> elemanlar\u0131 listesindeki ikinci eleman\u0131 i\u015faret eder. Bu \u00f6rnekte, bu eleman “2. Paragraf”t\u0131r.
\n3.  Se\u00e7icinin ilk k\u0131sm\u0131 (p<\/code>), bu ikinci eleman\u0131n bir p<\/code> etiketi olup olmad\u0131\u011f\u0131n\u0131 kontrol eder. Zaten filtreleme yap\u0131ld\u0131\u011f\u0131 i\u00e7in bu kontrol her zaman ba\u015far\u0131l\u0131 olacakt\u0131r.
\n4.  Sonu\u00e7 olarak, “2. Paragraf” eleman\u0131na stil uygulan\u0131r ve k\u0131rm\u0131z\u0131 renkte g\u00f6r\u00fcn\u00fcr.<\/p>\n
E\u011fer \u015fu kural\u0131 uygulad\u0131ysak:<\/p>\n
.container span:nth-of-type(1) {\n  color: blue;\n}<\/code><\/pre>\n
Bu durumda, “1. Span” mavi renkte olurdu. \u00c7\u00fcnk\u00fc .container<\/code> i\u00e7indeki tek span<\/code> eleman\u0131 budur ve span<\/code> tipli elemanlar aras\u0131nda birinci s\u0131radad\u0131r.<\/p>\n
\u00d6zetle, nth-of-type(X)<\/code> \u00f6nce \u00fcst eleman\u0131n t\u00fcm \u00e7ocuklar\u0131n\u0131 belirtilen tipe g\u00f6re filtreler, ard\u0131ndan bu filtrelenmi\u015f listedeki X. eleman\u0131 se\u00e7er. Bu, nth-of-type<\/code>‘\u0131n “benim tipimdeki karde\u015fler aras\u0131nda X. s\u0131rada olan” anlam\u0131na geldi\u011fi anlam\u0131na gelir.<\/p>\n
Temel Farklar ve \u00c7al\u0131\u015fma Mekanizmas\u0131<\/h3>\n
nth-child<\/code> ve nth-of-type<\/code> aras\u0131ndaki temel fark, elemanlar\u0131n say\u0131lma bi\u00e7iminde yatar. Bu fark, \u00f6zellikle bir \u00fcst eleman\u0131n i\u00e7inde farkl\u0131 t\u00fcrde elemanlar\u0131n bulundu\u011fu karma\u015f\u0131k HTML yap\u0131lar\u0131nda kendini g\u00f6sterir.<\/p>\n
*   Say\u0131lan Elemanlar:<\/strong>
\n       nth-child<\/code><\/strong>: Bir \u00fcst eleman\u0131n <\/em>t\u00fcm* \u00e7ocuklar\u0131n\u0131 sayar, eleman tipi ne olursa olsun.
\n       nth-of-type<\/code><\/strong>: Bir \u00fcst eleman\u0131n sadece <\/em>belirli bir tipteki* \u00e7ocuklar\u0131n\u0131 sayar. Se\u00e7icide belirtilen eleman tipine (\u00f6rn. p<\/code>) g\u00f6re filtreleme yapar.<\/p>\n
*   Se\u00e7im Kriteri:<\/strong>
\n       nth-child<\/code><\/strong>: Bir eleman\u0131n \u00fcst eleman i\u00e7indeki <\/em>mutlak konumuna* bakar ve bu konumdaki eleman\u0131n se\u00e7iciyle e\u015fle\u015fip e\u015fle\u015fmedi\u011fini kontrol eder. E\u011fer X. konumdaki eleman se\u00e7iciyle e\u015fle\u015fmiyorsa, stil uygulanmaz.
\n       nth-of-type<\/code><\/strong>: Bir eleman\u0131n, <\/em>kendi tipindeki karde\u015fleri aras\u0131ndaki g\u00f6receli konumuna* bakar. Se\u00e7iciyle e\u015fle\u015fen elemanlar aras\u0131nda X. s\u0131rada olan\u0131 se\u00e7er.<\/p>\n
*   Senaryolar:<\/strong>
\n    *   Homojen Eleman Grubu:<\/strong> E\u011fer bir \u00fcst eleman\u0131n t\u00fcm \u00e7ocuklar\u0131 ayn\u0131 tipteyse (\u00f6rne\u011fin, bir ul<\/code> i\u00e7indeki t\u00fcm li<\/code> elemanlar\u0131 veya bir div<\/code> i\u00e7indeki t\u00fcm p<\/code> elemanlar\u0131), nth-child<\/code> ve nth-of-type<\/code> genellikle ayn\u0131 sonucu verir. Bu durumda, her iki se\u00e7ici de ayn\u0131 elemanlar\u0131 sayd\u0131\u011f\u0131 i\u00e7in ayn\u0131 mant\u0131kla \u00e7al\u0131\u015f\u0131r.
\n    *   Heterojen Eleman Grubu:<\/strong> E\u011fer bir \u00fcst eleman\u0131n i\u00e7inde farkl\u0131 tiplerde elemanlar varsa (\u00f6rne\u011fin, bir div<\/code> i\u00e7inde p<\/code>, span<\/code>, img<\/code> elemanlar\u0131n\u0131n kar\u0131\u015f\u0131k olarak bulunmas\u0131), bu iki s\u00f6zde s\u0131n\u0131f\u0131n davran\u0131\u015flar\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde farkl\u0131la\u015f\u0131r. nth-child<\/code> beklendi\u011fi gibi \u00e7al\u0131\u015fmayabilirken, nth-of-type<\/code> genellikle daha tahmin edilebilir sonu\u00e7lar verir \u00e7\u00fcnk\u00fc sadece hedeflenen eleman tipini sayar.<\/p>\n
Bu fark\u0131 daha iyi g\u00f6rselle\u015ftirmek i\u00e7in a\u015fa\u011f\u0131daki HTML yap\u0131s\u0131n\u0131 ve farkl\u0131 CSS kurallar\u0131n\u0131 inceleyelim:<\/p>\n
\n  
1. Paragraf<\/p>     \n  1. Span<\/span>   \n  
2. Paragraf<\/p>     \n  
1. Div<\/div>      \n  
3. Paragraf<\/p>     \n  2. Span<\/span>   \n<\/div><\/code><\/pre>\n
\u015eimdi bu yap\u0131ya farkl\u0131 CSS kurallar\u0131 uygulayal\u0131m:<\/p>\n
*   p:nth-child(2)<\/code><\/strong>:
\n    *   Genel \u00e7ocuk s\u0131ralamas\u0131na bak\u0131l\u0131r: 1. p<\/code>, 2. span<\/code>, 3. p<\/code>, 4. div<\/code>, 5. p<\/code>, 6. span<\/code>.
\n    *   2. \u00e7ocuk bir span<\/code>‘dir.
\n    *   Se\u00e7ici p<\/code> arad\u0131\u011f\u0131 i\u00e7in, span<\/code> ile e\u015fle\u015fmez.
\n    *   Sonu\u00e7:<\/strong> Hi\u00e7bir eleman se\u00e7ilmez.<\/p>\n
*   p:nth-of-type(2)<\/code><\/strong>:
\n    *   Sadece p<\/code> tipindeki \u00e7ocuklara bak\u0131l\u0131r: 1. p<\/code> (“1. Paragraf”), 2. p<\/code> (“2. Paragraf”), 3. p<\/code> (“3. Paragraf”).
\n    *   p<\/code> tipindeki elemanlar aras\u0131nda 2. s\u0131rada olan “2. Paragraf” se\u00e7ilir.
\n    *   Sonu\u00e7:<\/strong> “2. Paragraf” se\u00e7ilir.<\/p>\n
*   span:nth-child(2)<\/code><\/strong>:
\n    *   Genel \u00e7ocuk s\u0131ralamas\u0131nda 2. \u00e7ocuk bir span<\/code>‘dir.
\n    *   Se\u00e7ici span<\/code> arad\u0131\u011f\u0131 i\u00e7in, span<\/code> ile e\u015fle\u015fir.
\n    *   Sonu\u00e7:<\/strong> “1. Span” se\u00e7ilir.<\/p>\n
*   span:nth-of-type(2)<\/code><\/strong>:
\n    *   Sadece span<\/code> tipindeki \u00e7ocuklara bak\u0131l\u0131r: 1. span<\/code> (“1. Span”), 2. span<\/code> (“2. Span”).
\n    *   span<\/code> tipindeki elemanlar aras\u0131nda 2. s\u0131rada olan “2. Span” se\u00e7ilir.
\n    *   Sonu\u00e7:<\/strong> “2. Span” se\u00e7ilir.<\/p>\n
Bu \u00f6rnekler, iki s\u00f6zde s\u0131n\u0131f\u0131n nas\u0131l farkl\u0131 \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 ve neden do\u011fru se\u00e7imin \u00f6nemli oldu\u011funu net bir \u015fekilde ortaya koymaktad\u0131r.<\/p>\n
Pratik Uygulama Senaryolar\u0131<\/h3>\n
Her iki s\u00f6zde s\u0131n\u0131f\u0131n da kendine \u00f6zg\u00fc kullan\u0131m alanlar\u0131 vard\u0131r ve do\u011fru senaryoda do\u011fru arac\u0131 kullanmak, CSS kodunuzun daha verimli, okunabilir ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n
nth-child Kullan\u0131m Alanlar\u0131<\/h4>\n
nth-child<\/code>, elemanlar\u0131n t\u00fcm karde\u015fleri aras\u0131ndaki mutlak konumunun<\/em> \u00f6nemli oldu\u011fu durumlarda idealdir.<\/p>\n
1.  Tablo Sat\u0131rlar\u0131nda Alternatif Renklendirme (Zebra \u015eeritler):<\/strong>
\n    Bu, nth-child<\/code>‘\u0131n en klasik ve en bilinen kullan\u0131m alan\u0131d\u0131r. Bir tablonun sat\u0131rlar\u0131n\u0131 ( tr<\/code> elemanlar\u0131) s\u0131ras\u0131yla farkl\u0131 renklerle boyayarak okunabilirli\u011fi art\u0131r\u0131r\u0131z. Burada t\u00fcm tr<\/code> elemanlar\u0131 ayn\u0131 tipte oldu\u011fu i\u00e7in nth-child<\/code> ve nth-of-type<\/code> ayn\u0131 sonucu verir, ancak nth-child<\/code> daha yayg\u0131n kullan\u0131l\u0131r.<\/p>\n
table tr:nth-child(even) {\n      background-color: #f2f2f2;\n    }\n    table tr:nth-child(odd) {\n      background-color: #ffffff;\n    }<\/code><\/pre>\n
2.  Grid D\u00fczenlerinde S\u00fctun veya Sat\u0131r Ba\u015f\u0131 Elemanlar\u0131 Hedefleme:<\/strong>
\n    Bir CSS Grid veya Flexbox d\u00fczeninde, belirli bir s\u0131rada yer alan elemanlar\u0131 hedefleyerek \u00f6zel stiller uygulamak isteyebilirsiniz. \u00d6rne\u011fin, her 3 elemandan birine sa\u011f kenar bo\u015flu\u011fu vermek veya her 4 elemandan birini farkl\u0131 bir arka planla i\u015faretlemek.<\/p>\n
.grid-container > .grid-item:nth-child(3n) {\n      margin-right: 0; \/ Her 3. eleman\u0131n sa\u011f kenar bo\u015flu\u011funu kald\u0131r <\/em>\/\n    }<\/code><\/pre>\n
    Burada, grid-item<\/code>‘lar\u0131n aras\u0131na ba\u015fka tipte elemanlar girme olas\u0131l\u0131\u011f\u0131 d\u00fc\u015f\u00fck oldu\u011fu i\u00e7in nth-child<\/code> g\u00fcvenle kullan\u0131labilir.<\/p>\n
3.  Ba\u015fl\u0131k Navigasyonunda \u0130lk veya Son Elemanlar\u0131 Stilize Etme:<\/strong>
\n    Bir navigasyon men\u00fcs\u00fcnde (\u00f6rne\u011fin, ul<\/code> i\u00e7indeki li<\/code>‘ler), ilk veya son \u00f6\u011feye \u00f6zel bir stil (\u00f6rne\u011fin, farkl\u0131 bir kenarl\u0131k veya ikon) uygulamak isteyebilirsiniz.<\/p>\n
nav ul li:first-child { \/ Veya :nth-child(1) <\/em>\/\n      font-weight: bold;\n    }\n    nav ul li:last-child { \/ Veya :nth-child(n) <\/em>\/\n      border-right: none;\n    }<\/code><\/pre>\n
    Yine, bir ul<\/code> listesi genellikle sadece li<\/code> elemanlar\u0131 i\u00e7erdi\u011fi i\u00e7in nth-child<\/code> burada do\u011fru se\u00e7imdir.<\/p>\n
4.  Genel Eleman S\u0131ras\u0131n\u0131n Semantik \u00d6nemi Oldu\u011funda:<\/strong>
\n    E\u011fer bir eleman grubunun i\u00e7indeki genel s\u0131ralama, eleman\u0131n tipinden ba\u011f\u0131ms\u0131z olarak semantik bir \u00f6neme sahipse, nth-child<\/code> tercih edilmelidir. \u00d6rne\u011fin, bir zaman \u00e7izelgesindeki her X<\/code> olay\u0131n farkl\u0131 bir stil almas\u0131 gerekiyorsa ve bu olaylar farkl\u0131 HTML elemanlar\u0131yla temsil edilebiliyorsa.<\/p>\n
nth-of-type Kullan\u0131m Alanlar\u0131<\/h4>\n
nth-of-type<\/code>, elemanlar\u0131n kendi tipindeki karde\u015fleri aras\u0131ndaki g\u00f6receli konumunun<\/em> \u00f6nemli oldu\u011fu durumlarda idealdir. Bu, \u00f6zellikle i\u00e7erik bazl\u0131 sayfalarda veya dinamik olarak eklenen elemanlar\u0131n bulundu\u011fu yerlerde \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
1.  Makale \u0130\u00e7indeki Paragraflar\u0131 veya Ba\u015fl\u0131klar\u0131 Stilize Etme:<\/strong>
\n    Bir makale i\u00e7inde paragraflar, resimler, al\u0131nt\u0131lar, tablolar gibi farkl\u0131 t\u00fcrde elemanlar bulunabilir. Sadece paragraflar\u0131 hedefleyerek her ikinci paragrafa farkl\u0131 bir stil uygulamak isteyebilirsiniz.<\/p>\n
\n      
\u0130lk paragraf.<\/p>\n      \"Resim\"\n      
\u0130kinci paragraf.<\/p>\n      
Al\u0131nt\u0131 metni.<\/blockquote>\n      
\u00dc\u00e7\u00fcnc\u00fc paragraf.<\/p>\n    <\/article><\/code><\/pre>\n
article p:nth-of-type(odd) {\n      background-color: #e0f7fa; \/ Sadece tek s\u0131radaki paragraflara arka plan ver <\/em>\/\n    }<\/code><\/pre>\n
    Burada p:nth-child(odd)<\/code> kullansayd\u0131k, resim ve al\u0131nt\u0131 elemanlar\u0131 genel s\u0131ralamay\u0131 bozaca\u011f\u0131 i\u00e7in beklenen sonucu alamazd\u0131k.<\/p>\n
2.  Form Elemanlar\u0131n\u0131 D\u00fczenleme:<\/strong>
\n    Bir formda farkl\u0131 tipte input elemanlar\u0131 (text, checkbox, radio) olabilir. Sadece belirli bir tipteki input elemanlar\u0131n\u0131 hedefleyerek stil uygulamak isteyebilirsiniz.<\/p>\n
\n