[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t5-s02-structural-selectors":3,"course:taropood":60},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,2,"t5-s02-structural-selectors","book",5,"فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},1,"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},3,"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",[20,24,27,32,35,38,41,44,47,50,53,57],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>آخر این فصل یک فهرستِ درس‌ها داری که تر و تمیز استایل خورده، بی‌آنکه به حتی یک آیتم \u003Ccode>class\u003C\u002Fcode> بدهی: سطرها یک‌درمیان رنگ‌اند تا چشم راحت دنبالشان کند، اولین درس پررنگ و برجسته است، آخری با یک رنگِ متفاوت مشخص شده، و بینِ همه یک خطِ نازکِ جداکننده هست — جز زیرِ آخری. همهٔ این‌ها را با هدف‌گرفتنِ عنصرها بر اساسِ \u003Cstrong>جایگاهشان\u003C\u002Fstrong> و \u003Cstrong>رابطه‌شان\u003C\u002Fstrong> انجام می‌دهی، نه اسمشان.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-structural-list.fc120877f1.160.webp 160w, \u002F_img\u002F01-image-structural-list.fc120877f1.320.webp 320w, \u002F_img\u002F01-image-structural-list.fc120877f1.640.webp 640w, \u002F_img\u002F01-image-structural-list.fc120877f1.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-structural-list.fc120877f1.1280.jpg\" srcset=\"\u002F_img\u002F01-image-structural-list.fc120877f1.160.jpg 160w, \u002F_img\u002F01-image-structural-list.fc120877f1.320.jpg 320w, \u002F_img\u002F01-image-structural-list.fc120877f1.640.jpg 640w, \u002F_img\u002F01-image-structural-list.fc120877f1.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک فهرستِ عمودی از چند ردیف که یک‌درمیان دو رنگِ روشن دارند؛ ردیفِ اول پررنگ و آبی، ردیفِ آخر با رنگِ متفاوت، و بینِ ردیف‌ها خطِ نازکِ جداکننده\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>با \u003Ccode>:nth-child\u003C\u002Fcode> و \u003Ccode>:first-child\u003C\u002Fcode>\u002F\u003Ccode>:last-child\u003C\u002Fcode> عنصری را بر اساسِ جایگاهش انتخاب کنی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>:not()\u003C\u002Fcode> همه را جز یک استثنا هدف بگیری\u003C\u002Fli>\n\u003Cli>با combinator های \u003Ccode>>\u003C\u002Fcode>، \u003Ccode>+\u003C\u002Fcode> و \u003Ccode>~\u003C\u002Fcode> رابطهٔ بینِ عنصرها را انتخاب کنی\u003C\u002Fli>\n\u003Cli>با \u003Ccode>:is()\u003C\u002Fcode> و \u003Ccode>:where()\u003C\u002Fcode> چند selector را کوتاه و تمیز گروه کنی\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از ترم ۱:\u003C\u002Fstrong> \u003Ccode><ul>\u003C\u002Fcode> و \u003Ccode><li>\u003C\u002Fcode> — کلِ کار روی یک فهرست است.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۲:\u003C\u002Fstrong> selector نوع و class، و \u003Cstrong>specificity\u003C\u002Fstrong> — آخرِ فصل دوباره به کارت می‌آید.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۳:\u003C\u002Fstrong> \u003Ccode>border-block-end\u003C\u002Fcode> و \u003Ccode>margin-inline\u003C\u002Fcode> — برای خط‌ها و فاصله‌های راست‌به‌چپ.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک فهرستِ سادهٔ بی‌استایل از چند درس می‌بینی. کارِ این فصل این است که خط‌به‌خط آن را با selector های ساختاری بسازی و هر بار ببینی کدام آیتم عوض شد","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-5-interaction\u002Fsession-02-structural-selectors",{"kind":21,"heading":33,"html":34},"۱. انتخاب بر اساسِ جایگاه: :first-child و :last-child","\u003Ch2 id=\"۱-انتخاب-بر-اساسِ-جایگاه-first-child-و-last-child\">۱. انتخاب بر اساسِ جایگاه: \u003Ccode>:first-child\u003C\u002Fcode> و \u003Ccode>:last-child\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8-%D8%A8%D8%B1-%D8%A7%D8%B3%D8%A7%D8%B3%D9%90-%D8%AC%D8%A7%DB%8C%DA%AF%D8%A7%D9%87-first-child-%D9%88-last-child\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا حالا برای اینکه یک آیتمِ خاص را استایل بدهی، به آن \u003Ccode>class\u003C\u002Fcode> می‌دادی. ولی گاهی نمی‌خواهی — یا نمی‌توانی — به هر آیتم دست بزنی. مثلاً می‌خواهی «اولین درس» همیشه برجسته باشد، هر درسی که باشد. برای این کار CSS چند selector دارد که به \u003Cstrong>جایگاهِ\u003C\u002Fstrong> عنصر نگاه می‌کنند، نه اسمش. این‌ها هم pseudo-class اند (مثلِ فصلِ قبل)، ولی به‌جای حالتِ تعاملی، جایگاهِ ساختاری را هدف می‌گیرند.\u003C\u002Fp>\n\u003Cp>اولین‌ها ساده‌اند: \u003Ccode>:first-child\u003C\u002Fcode> یعنی «عنصری که اولین فرزندِ والدش است» و \u003Ccode>:last-child\u003C\u002Fcode> یعنی «آخرین فرزند». اول به فهرست یک استایلِ پایه بده، بعد اولی و آخری را جدا کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.lessons > li:first-child {\n  font-weight: 700;\n  color: #2a6b93;\n}\n\n.lessons > li:last-child {\n  color: #bc3e1c;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> «مقدمه» (اولین درس) پررنگ و آبی شد، و «پروژهٔ پایانی» (آخرین) قرمز. حالا در HTML جای دو درس را عوض کن یا یکی را پاک کن — می‌بینی این استایل‌ها همان لحظه به آیتمِ تازه‌ای که سرِ آن جایگاه نشسته می‌پرند. تو جایگاه را هدف گرفتی، نه یک آیتمِ مشخص را.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. :nth-child(): یک الگوی جایگاهی","\u003Ch2 id=\"۲-nth-child-یک-الگوی-جایگاهی\">۲. \u003Ccode>:nth-child()\u003C\u002Fcode>: یک الگوی جایگاهی\u003Ca class=\"head-anchor\" href=\"#%DB%B2-nth-child-%DB%8C%DA%A9-%D8%A7%D9%84%DA%AF%D9%88%DB%8C-%D8%AC%D8%A7%DB%8C%DA%AF%D8%A7%D9%87%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>:first-child\u003C\u002Fcode> فقط اولی را می‌گیرد. اگر بخواهی «هر آیتمِ زوج» یا «هر سومی» را بگیری، \u003Ccode>:nth-child()\u003C\u002Fcode> را داری: داخلِ پرانتزش یک الگو می‌نویسی. پرکاربردترین‌ها \u003Ccode>even\u003C\u002Fcode> (زوج) و \u003Ccode>odd\u003C\u002Fcode> (فرد) هستند. با \u003Ccode>even\u003C\u002Fcode> یک راه‌راهِ ملایم بساز تا فهرست خواناتر شود:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.lessons > li:nth-child(even) {\n  background-color: #f0e7d2;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا درس‌های دوم، چهارم و ششم یک پس‌زمینهٔ روشن گرفتند و فهرست راه‌راه شد. \u003Ccode>even\u003C\u002Fcode> را به \u003Ccode>odd\u003C\u002Fcode> عوض کن و ببین رنگ به سطرهای فرد می‌پرد.\u003C\u002Fp>\n\u003Cp>اما اینجا یک تلهٔ کلاسیک هست که تقریباً همه یک‌بار توش می‌افتند. بیا عمداً توش بیفتیم تا خوب یادت بماند. فرض کن می‌خواهی بالای فهرست یک آیتمِ «نکتهٔ روز» اضافه کنی. در HTML، درست قبل از «مقدمه» این را بگذار:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><li>نکتهٔ روز: هر روز کمی تمرین کن<\u002Fli>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا به فهرست نگاه کن: راه‌راه به‌هم ریخت و «مقدمه» — که می‌خواستی همیشه اولی و آبی باشد — دیگر پررنگ نیست! انگار selector هایت جابه‌جا شدند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> این دقیقاً درسِ همین بخش است. \u003Ccode>:nth-child\u003C\u002Fcode> و \u003Ccode>:first-child\u003C\u002Fcode> به \u003Cstrong>جایگاه در میانِ همهٔ خواهر-برادرها\u003C\u002Fstrong> نگاه می‌کنند، نه به class و نه به «چندمین آیتمِ نوعِ خاص». حالا «نکتهٔ روز» فرزندِ اول است، پس \u003Ccode>:first-child\u003C\u002Fcode> رفت سراغِ او؛ و «مقدمه» شد فرزندِ دوم، پس با آیتم‌های زوج رنگ گرفت. حتی اگر بنویسی \u003Ccode>.lesson:nth-child(2)\u003C\u002Fcode>، معنایش «دومین \u003Ccode>.lesson\u003C\u002Fcode>» نیست — یعنی «عنصری که هم دومین فرزند است و هم class اش \u003Ccode>lesson\u003C\u002Fcode> است». راهِ درست: فهرست را یک‌دست نگه‌دار. آن آیتمِ «نکته» جزوِ درس‌ها نیست، پس جایش داخلِ \u003Ccode><ul>\u003C\u002Fcode> نیست؛ آن خط را پاک کن و نکته را در یک \u003Ccode><p>\u003C\u002Fcode> \u003Cstrong>بالای\u003C\u002Fstrong> فهرست بگذار. حالا شمارش دوباره همان می‌شود که انتظار داری.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":39,"html":40},"۳. :not(): همه، جز استثنا","\u003Ch2 id=\"۳-not-همه-جز-استثنا\">۳. \u003Ccode>:not()\u003C\u002Fcode>: همه، جز استثنا\u003Ca class=\"head-anchor\" href=\"#%DB%B3-not-%D9%87%D9%85%D9%87-%D8%AC%D8%B2-%D8%A7%D8%B3%D8%AA%D8%AB%D9%86%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان بین آیتم‌ها هیچ خطی نیست. می‌خواهی زیرِ هر درس یک خطِ جداکننده باشد — ولی نه زیرِ آخری، چون خودِ کادرِ فهرست پایین را می‌بندد. یک راهِ تمیز \u003Ccode>:not()\u003C\u002Fcode> است: داخلِ پرانتزش یک selector می‌گذاری و می‌گویی «همه، جز این‌ها».\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.lessons > li:not(:last-child) {\n  border-block-end: 1px solid #d8ccae;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا زیرِ هر درس یک خطِ نازک افتاد، جز زیرِ «پروژهٔ پایانی». \u003Ccode>:not(:last-child)\u003C\u002Fcode> یعنی «هر li که آخرین نیست». \u003Ccode>:not()\u003C\u002Fcode> هر selector ای را می‌پذیرد؛ می‌توانی \u003Ccode>:not(.done)\u003C\u002Fcode> یا \u003Ccode>:not(:first-child)\u003C\u002Fcode> هم بنویسی.\u003C\u002Fp>\n",{"kind":21,"heading":42,"html":43},"۴. combinator ها: انتخاب بر اساسِ رابطه","\u003Ch2 id=\"۴-combinator-ها-انتخاب-بر-اساسِ-رابطه\">۴. combinator ها: انتخاب بر اساسِ رابطه\u003Ca class=\"head-anchor\" href=\"#%DB%B4-combinator-%D9%87%D8%A7-%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8-%D8%A8%D8%B1-%D8%A7%D8%B3%D8%A7%D8%B3%D9%90-%D8%B1%D8%A7%D8%A8%D8%B7%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا اینجا فاصلهٔ بینِ دو selector را با یک \u003Ccode>>\u003C\u002Fcode> نوشتیم بی‌اینکه اسمش را بگوییم. علامتی که رابطهٔ بینِ دو عنصر را می‌سازد \u003Cstrong>combinator\u003C\u002Fstrong> نام دارد، و سه تای پرکاربرد داریم:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>>\u003C\u002Fcode> (فرزندِ مستقیم): \u003Ccode>.lessons > li\u003C\u002Fcode> یعنی فقط li هایی که \u003Cstrong>مستقیماً\u003C\u002Fstrong> فرزندِ \u003Ccode>.lessons\u003C\u002Fcode> اند. برای همین «حلقهٔ while» و «حلقهٔ for» که یک پله تودرترند راه‌راه و خط نگرفتند — آن‌ها فرزندِ مستقیم نیستند. اگر \u003Ccode>>\u003C\u002Fcode> را برداری و فقط \u003Ccode>.lessons li\u003C\u002Fcode> بنویسی (فاصله، یعنی descendant از ترم ۲)، آن دوتای تودرتو هم استایل می‌گیرند. همین را در آزمایشگاه امتحان کن و فرق را ببین.\u003C\u002Fli>\n\u003Cli>\u003Ccode>+\u003C\u002Fcode> (خواهر-برادرِ چسبیده): \u003Ccode>li + li\u003C\u002Fcode> یعنی «هر li که \u003Cstrong>بلافاصله\u003C\u002Fstrong> بعد از یک li دیگر می‌آید» — یعنی همه جز اولی. \u003Ccode>.lessons > li:not(:last-child)\u003C\u002Fcode> را با \u003Ccode>.lessons > li + li\u003C\u002Fcode> عوض کن؛ می‌بینی تقریباً همان جداکننده‌ها می‌آید، این‌بار از زاویهٔ «بعدی».\u003C\u002Fli>\n\u003Cli>\u003Ccode>~\u003C\u002Fcode> (خواهر-برادرِ بعدی): \u003Ccode>li:first-child ~ li\u003C\u002Fcode> یعنی «همهٔ li هایی که بعد از اولی می‌آیند»، نه فقط چسبیده. امتحانش کن و ببین همهٔ درس‌ها جز اولی رنگ می‌گیرند.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> فرقِ \u003Ccode>+\u003C\u002Fcode> و \u003Ccode>~\u003C\u002Fcode> را با یک جمله نگه‌دار: \u003Ccode>+\u003C\u002Fcode> فقط \u003Cstrong>همان یکیِ بعدی\u003C\u002Fstrong> را می‌گیرد، \u003Ccode>~\u003C\u002Fcode> \u003Cstrong>همهٔ بعدی‌ها\u003C\u002Fstrong> را. هر دو فقط رو به جلو نگاه می‌کنند — عنصرهای \u003Cem>قبلی\u003C\u002Fem> را نمی‌شود این‌طور انتخاب کرد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":45,"html":46},"۵. :is() و :where(): گروه‌کردنِ تمیز","\u003Ch2 id=\"۵-is-و-where-گروه‌کردنِ-تمیز\">۵. \u003Ccode>:is()\u003C\u002Fcode> و \u003Ccode>:where()\u003C\u002Fcode>: گروه‌کردنِ تمیز\u003Ca class=\"head-anchor\" href=\"#%DB%B5-is-%D9%88-where-%DA%AF%D8%B1%D9%88%D9%87%E2%80%8C%DA%A9%D8%B1%D8%AF%D9%86%D9%90-%D8%AA%D9%85%DB%8C%D8%B2\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>گاهی یک استایل را برای چند selector می‌خواهی. تا حالا با \u003Ccode>,\u003C\u002Fcode> گروه می‌کردی (\u003Ccode>li:first-child, li:last-child\u003C\u002Fcode>). \u003Ccode>:is()\u003C\u002Fcode> همان کار را کوتاه‌تر می‌کند: \u003Ccode>.lessons > li:is(:first-child, :last-child)\u003C\u002Fcode> یعنی «li ای که یا اولی است یا آخری». امتحانش کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.lessons > li:is(:first-child, :last-child) {\n  letter-spacing: 0.5px;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> فقط اولی و آخری کمی بازتر شدند. \u003Ccode>:is()\u003C\u002Fcode> وقتی درخشان می‌شود که selector ها بلندند: به‌جای نوشتنِ دو بارِ \u003Ccode>.lessons > li ...\u003C\u002Fcode>، یک بار می‌نویسی و استثناها را داخلِ \u003Ccode>:is()\u003C\u002Fcode> می‌گذاری.\u003C\u002Fp>\n\u003Cp>\u003Ccode>:where()\u003C\u002Fcode> دقیقاً مثلِ \u003Ccode>:is()\u003C\u002Fcode> است، با یک فرقِ مهم: \u003Cstrong>specificity اش صفر است\u003C\u002Fstrong>. یعنی هر قاعده‌ای که بعد بیاید خیلی راحت رویش را می‌گیرد. وقتی می‌خواهی یک استایلِ پایه بدهی که بقیه بتوانند بی‌دردسر عوضش کنند، \u003Ccode>:where()\u003C\u002Fcode> را انتخاب کن؛ وقتی می‌خواهی وزنِ عادیِ selector حفظ شود، \u003Ccode>:is()\u003C\u002Fcode>. (specificity را از ترم ۲ یادت هست.)\u003C\u002Fp>\n",{"kind":21,"heading":48,"html":49},"کد کاملِ این فصل","\u003Ch2 id=\"کد-کاملِ-این-فصل\">کد کاملِ این فصل\u003Ca class=\"head-anchor\" href=\"#%DA%A9%D8%AF-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>اول \u003Ccode>index.html\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <title>selector های ساختاری<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <main class="page">\n      <h1>فهرست درس‌ها<\u002Fh1>\n      <ul class="lessons">\n        <li>مقدمه<\u002Fli>\n        <li>متغیرها<\u002Fli>\n        <li>شرط‌ها<\u002Fli>\n        <li>حلقه‌ها\n          <ul>\n            <li>حلقهٔ while<\u002Fli>\n            <li>حلقهٔ for<\u002Fli>\n          <\u002Ful>\n        <\u002Fli>\n        <li>توابع<\u002Fli>\n        <li>پروژهٔ پایانی<\u002Fli>\n      <\u002Ful>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و \u003Ccode>styles.css\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  background-color: #f6edda;\n  color: #2c2114;\n  line-height: 1.8;\n}\n\n.page {\n  padding: 24px;\n}\n\n.lessons {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  max-width: 420px;\n  border: 1px solid #d8ccae;\n  border-radius: 10px;\n  overflow: hidden;\n}\n\n\u002F* faghat li-haye mostaghim, na li-haye tou-dar-tou *\u002F\n.lessons > li {\n  padding: 12px 16px;\n}\n\n\u002F* zebra: li-haye zoj rang-e paszamine-ye motefavet *\u002F\n.lessons > li:nth-child(even) {\n  background-color: #f0e7d2;\n}\n\n\u002F* avvalin dars: bardaste va abi *\u002F\n.lessons > li:first-child {\n  font-weight: 700;\n  color: #2a6b93;\n}\n\n\u002F* akharin dars: rang-e taakid *\u002F\n.lessons > li:last-child {\n  color: #bc3e1c;\n}\n\n\u002F* khat-e jodakonande zir-e hame joz akhari *\u002F\n.lessons > li:not(:last-child) {\n  border-block-end: 1px solid #d8ccae;\n}\n\n\u002F* zir-list-e tou-dar-too: kami tou-rafte va sabz *\u002F\n.lessons ul {\n  list-style: none;\n  margin-block: 8px 0;\n  margin-inline: 16px 0;\n  padding: 0;\n  color: #55731b;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-combinators.d6b6866acf.160.webp 160w, \u002F_img\u002F02-image-combinators.d6b6866acf.320.webp 320w, \u002F_img\u002F02-image-combinators.d6b6866acf.640.webp 640w, \u002F_img\u002F02-image-combinators.d6b6866acf.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-combinators.d6b6866acf.1280.jpg\" srcset=\"\u002F_img\u002F02-image-combinators.d6b6866acf.160.jpg 160w, \u002F_img\u002F02-image-combinators.d6b6866acf.320.jpg 320w, \u002F_img\u002F02-image-combinators.d6b6866acf.640.jpg 640w, \u002F_img\u002F02-image-combinators.d6b6866acf.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک نمودارِ ساده از رابطهٔ عنصرها: یک جعبهٔ والد با چند جعبهٔ فرزند؛ یک فلش فقط به فرزندانِ مستقیم، یک فلش از یک جعبه به همان جعبهٔ بلافاصله‌بعد، و یک فلش از یک جعبه به همهٔ جعبه‌های بعد از آن\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> یک انتخابِ دشوار برای دستیارِ AI ات بگذار، مثلاً «می‌خواهم در این فهرست همهٔ آیتم‌ها جز سومی یک خط بگیرند؛ چه selector ای بنویسم؟». جوابش را همان‌جا در آزمایشگاه بچسبان و با چشمت چک کن که واقعاً سومی جا افتاده. AI گاهی \u003Ccode>:nth-child\u003C\u002Fcode> را با «چندمین آیتمِ یک class» قاطی می‌کند — دقیقاً همان تله‌ای که خودت این فصل دیدی — پس دیدن مهم‌تر از باور کردن است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":51,"html":52},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:nth-child()\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>ان‌ث-چایلد\u003C\u002Ftd>\n\u003Ctd>فرزندی را با یک الگوی جایگاهی (\u003Ccode>even\u003C\u002Fcode>\u002F\u003Ccode>odd\u003C\u002Fcode>\u002Fعدد) انتخاب می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:first-child\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>فرست-چایلد\u003C\u002Ftd>\n\u003Ctd>اولین فرزندِ والد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:last-child\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>لست-چایلد\u003C\u002Ftd>\n\u003Ctd>آخرین فرزندِ والد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:not()\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>نات\u003C\u002Ftd>\n\u003Ctd>همه، جز آنچه داخلِ پرانتز است\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>combinator\u003C\u002Ftd>\n\u003Ctd>کامباینِیتور\u003C\u002Ftd>\n\u003Ctd>علامتی که رابطهٔ بینِ دو selector را می‌سازد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>فرزندِ مستقیم\u003C\u002Ftd>\n\u003Ctd>فقط فرزندانِ بی‌واسطه\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>+\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>خواهر-برادرِ چسبیده\u003C\u002Ftd>\n\u003Ctd>فقط عنصرِ بلافاصله‌بعد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>~\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>خواهر-برادرِ بعدی\u003C\u002Ftd>\n\u003Ctd>همهٔ عنصرهای بعد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:is()\u003C\u002Fcode> \u002F \u003Ccode>:where()\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>ایز \u002F وِر\u003C\u002Ftd>\n\u003Ctd>چند selector را گروه می‌کنند؛ \u003Ccode>:where()\u003C\u002Fcode> با specificity صفر\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":54,"heading":55,"html":56},"checkpoint","تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: \u003Ccode>.list > li:nth-child(2)\u003C\u002Fcode> و «دومین li داخلِ list» چه فرقی دارند وقتی اولین فرزندِ list یک عنصرِ دیگر (نه li) باشد؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک فهرستِ هفت‌تایی بساز و این‌ها را روی آن پیاده کن: هر آیتمِ فرد یک پس‌زمینهٔ روشن بگیرد (\u003Ccode>:nth-child(odd)\u003C\u002Fcode>)، اولی پررنگ باشد، آخری یک رنگِ متفاوت، و بینِ همه جز آخری یک خطِ جداکننده. بعد یک آیتم از وسط پاک کن و ببین راه‌راه خودش را دوباره مرتب می‌کند.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> با \u003Ccode>:nth-child()\u003C\u002Fcode> یک الگوی سخت‌تر بساز: هر \u003Cstrong>سومین\u003C\u002Fstrong> آیتم را رنگ کن (راهنما: داخلِ پرانتز می‌شود \u003Ccode>3n\u003C\u002Fcode> نوشت). بعد امتحان کن \u003Ccode>.lessons > li + li\u003C\u002Fcode> و \u003Ccode>.lessons > li:not(:first-child)\u003C\u002Fcode> هر دو چه چیزی را انتخاب می‌کنند و با یک جمله بگو چرا نتیجه‌شان یکی است.\u003C\u002Fp>\n",{"kind":21,"heading":58,"html":59},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان می‌توانی عنصرها را بر اساسِ حالت و جایگاه و رابطه انتخاب کنی. فصل بعد یک قدم عجیب‌تر برمی‌داریم: با \u003Ccode>::before\u003C\u002Fcode> و \u003Ccode>::after\u003C\u002Fcode> می‌توانی محتوایی روی صفحه بسازی که \u003Cstrong>اصلاً در HTML نیست\u003C\u002Fstrong> — علامتِ نقل‌قول، نشانِ کنارِ عنوان، یک فلشِ کوچک — همه فقط با CSS و یک property تازه به اسمِ \u003Ccode>content\u003C\u002Fcode>.\u003C\u002Fp>\n",{"course":61,"entitled":69,"lessons":70,"payments_enabled":69,"terms":255,"live":5},{"active_window":62,"effective_price_toman":63,"free":5,"lesson_count":64,"price_toman":65,"slug":66,"summary_fa":67,"title_fa":68},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[71,74,77,80,84,87,91,95,99,103,107,110,113,116,119,122,125,128,131,134,137,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,199,200,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252],{"free_preview":5,"order":12,"slug":72,"source":8,"term":12,"title_fa":73},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":6,"slug":75,"source":8,"term":12,"title_fa":76},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":16,"slug":78,"source":8,"term":12,"title_fa":79},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":81,"slug":82,"source":8,"term":12,"title_fa":83},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":9,"slug":85,"source":8,"term":12,"title_fa":86},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":88,"slug":89,"source":8,"term":12,"title_fa":90},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":92,"slug":93,"source":8,"term":12,"title_fa":94},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":96,"slug":97,"source":8,"term":12,"title_fa":98},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":100,"slug":101,"source":8,"term":12,"title_fa":102},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":104,"slug":105,"source":8,"term":12,"title_fa":106},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":12,"slug":108,"source":8,"term":6,"title_fa":109},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":6,"slug":111,"source":8,"term":6,"title_fa":112},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":16,"slug":114,"source":8,"term":6,"title_fa":115},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":81,"slug":117,"source":8,"term":6,"title_fa":118},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":9,"slug":120,"source":8,"term":6,"title_fa":121},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":88,"slug":123,"source":8,"term":6,"title_fa":124},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":92,"slug":126,"source":8,"term":6,"title_fa":127},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":96,"slug":129,"source":8,"term":6,"title_fa":130},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":100,"slug":132,"source":8,"term":6,"title_fa":133},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":104,"slug":135,"source":8,"term":6,"title_fa":136},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":138,"slug":139,"source":8,"term":6,"title_fa":140},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":12,"slug":142,"source":8,"term":16,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":6,"slug":145,"source":8,"term":16,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":16,"slug":148,"source":8,"term":16,"title_fa":149},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":81,"slug":151,"source":8,"term":16,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":9,"slug":154,"source":8,"term":16,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":88,"slug":157,"source":8,"term":16,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":92,"slug":160,"source":8,"term":16,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":96,"slug":163,"source":8,"term":16,"title_fa":164},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":100,"slug":166,"source":8,"term":16,"title_fa":167},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":104,"slug":169,"source":8,"term":16,"title_fa":170},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":138,"slug":172,"source":8,"term":16,"title_fa":173},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":12,"slug":175,"source":8,"term":81,"title_fa":176},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":6,"slug":178,"source":8,"term":81,"title_fa":179},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":16,"slug":181,"source":8,"term":81,"title_fa":182},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":81,"slug":184,"source":8,"term":81,"title_fa":185},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":9,"slug":187,"source":8,"term":81,"title_fa":188},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":88,"slug":190,"source":8,"term":81,"title_fa":191},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":92,"slug":193,"source":8,"term":81,"title_fa":194},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":96,"slug":196,"source":8,"term":81,"title_fa":197},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":81,"slug":202,"source":8,"term":9,"title_fa":203},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":9,"slug":205,"source":8,"term":9,"title_fa":206},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":88,"slug":208,"source":8,"term":9,"title_fa":209},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":92,"slug":211,"source":8,"term":9,"title_fa":212},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":96,"slug":214,"source":8,"term":9,"title_fa":215},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":100,"slug":217,"source":8,"term":9,"title_fa":218},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":104,"slug":220,"source":8,"term":9,"title_fa":221},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":12,"slug":223,"source":8,"term":88,"title_fa":224},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":6,"slug":226,"source":8,"term":88,"title_fa":227},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":16,"slug":229,"source":8,"term":88,"title_fa":230},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":81,"slug":232,"source":8,"term":88,"title_fa":233},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":9,"slug":235,"source":8,"term":88,"title_fa":236},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":88,"slug":238,"source":8,"term":88,"title_fa":239},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":92,"slug":241,"source":8,"term":88,"title_fa":242},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":96,"slug":244,"source":8,"term":88,"title_fa":245},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":100,"slug":247,"source":8,"term":88,"title_fa":248},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":104,"slug":250,"source":8,"term":88,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":138,"slug":253,"source":8,"term":88,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105237]