[{"data":1,"prerenderedAt":250},["ShallowReactive",2],{"lesson:t2-s02-selectors":3,"course:taropood":53},{"meta":4,"prev":10,"next":14,"sections":18},{"free_preview":5,"order":6,"slug":7,"source":8,"term":6,"title_fa":9},true,2,"t2-s02-selectors","book","فصل ۰۲ — selector ها",{"free_preview":5,"order":11,"slug":12,"source":8,"term":6,"title_fa":13},1,"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":15,"slug":16,"source":8,"term":6,"title_fa":17},3,"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",[19,23,26,31,34,37,40,43,46,50],{"kind":20,"heading":21,"html":22},"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>در فصل قبل رنگ را با اسمِ tag اعمال کردی — نوشتی \u003Ccode>body\u003C\u002Fcode> یا \u003Ccode>h1\u003C\u002Fcode> و قاعده به آن نوع عنصر خورد. ولی همیشه نمی‌خواهی \u003Cstrong>همهٔ\u003C\u002Fstrong> \u003Ccode><p>\u003C\u002Fcode> ها یک‌شکل باشند؛ گاهی فقط یکی‌شان را می‌خواهی جدا کنی، یا فقط لینک‌های یک ناحیهٔ خاص را. آخر این فصل یک صفحهٔ خوراکی داری که در آن دقیقاً می‌دانی چطور هر تکه را جدا نشانه بگیری: بعضی عنصرها را با نوعشان، بعضی را با یک برچسبِ مشترک، و یکی را چون یکتاست.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-selector-type-class-id.867719be04.160.webp 160w, \u002F_img\u002F01-image-selector-type-class-id.867719be04.320.webp 320w, \u002F_img\u002F01-image-selector-type-class-id.867719be04.640.webp 640w, \u002F_img\u002F01-image-selector-type-class-id.867719be04.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-selector-type-class-id.867719be04.1280.jpg\" srcset=\"\u002F_img\u002F01-image-selector-type-class-id.867719be04.160.jpg 160w, \u002F_img\u002F01-image-selector-type-class-id.867719be04.320.jpg 320w, \u002F_img\u002F01-image-selector-type-class-id.867719be04.640.jpg 640w, \u002F_img\u002F01-image-selector-type-class-id.867719be04.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>با selectorِ نوع، همهٔ عنصرهای یک tag را با هم هدف بگیری\u003C\u002Fli>\n\u003Cli>با \u003Ccode>,\u003C\u002Fcode> چند selector را در یک قاعده گروه کنی\u003C\u002Fli>\n\u003Cli>یک \u003Ccode>class\u003C\u002Fcode> بسازی و آن را روی چند عنصر به‌کار ببری، و بگویی چرا \u003Ccode>class\u003C\u002Fcode> انتخابِ اولت است\u003C\u002Fli>\n\u003Cli>با \u003Ccode>id\u003C\u002Fcode> یک عنصرِ یکتا را هدف بگیری و با یک فاصله، فقط عنصرهای داخلِ یک ناحیه را\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":20,"heading":24,"html":25},"قبل از شروع","\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> ساختارِ قاعده (selector، property، value) و رنگ با \u003Ccode>color\u003C\u002Fcode> و \u003Ccode>background-color\u003C\u002Fcode>. این فصل فقط سراغِ بخشِ selector می‌رود و همان دو property را نگه می‌دارد.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از ترم ۱:\u003C\u002Fstrong> \u003Ccode>class\u003C\u002Fcode> و \u003Ccode>id\u003C\u002Fcode> را به‌عنوان attribute داخلِ tag دیده‌ای؛ اینجا یاد می‌گیری از داخلِ CSS نشانه‌شان بگیری.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>فقط یک مرورگر لازم داری، یا همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":27,"heading":28,"html":29,"embed":30},"lab","","— یک صفحهٔ خوراکی می‌بینی با تیتر، منو، و دو بخشِ فهرست. هر selectorی که در این فصل می‌سازیم را همان‌جا امتحان می‌کنی و می‌بینی دقیقاً چه چیزی رنگی می‌شود و چه چیزی دست‌نخورده می‌ماند","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-2-css-basics\u002Fsession-02-selectors",{"kind":20,"heading":32,"html":33},"۱. selectorِ نوع، و گروه‌کردن با ,","\u003Ch2 id=\"۱-selectorِ-نوع-و-گروه‌کردن-با-\">۱. selectorِ نوع، و گروه‌کردن با \u003Ccode>,\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B1-selector%D9%90-%D9%86%D9%88%D8%B9-%D9%88-%DA%AF%D8%B1%D9%88%D9%87%E2%80%8C%DA%A9%D8%B1%D8%AF%D9%86-%D8%A8%D8%A7-\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>selectorی که در فصل قبل نوشتی — همان \u003Ccode>body\u003C\u002Fcode> و \u003Ccode>h1\u003C\u002Fcode> — اسمِ رسمی‌اش \u003Cstrong>type selector\u003C\u002Fstrong> است: عنصرها را با \u003Cstrong>نوعشان\u003C\u002Fstrong> (اسمِ tag) هدف می‌گیرد. بنویسی \u003Ccode>p\u003C\u002Fcode>، به هر \u003Ccode><p>\u003C\u002Fcode>ِ صفحه می‌خورد؛ بنویسی \u003Ccode>li\u003C\u002Fcode>، به هر \u003Ccode><li>\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>بیا در صفحهٔ خوراکی، هر دو تیتر — \u003Ccode><h1>\u003C\u002Fcode> و \u003Ccode><h2>\u003C\u002Fcode> ها — را سرمه‌ای کنیم. می‌شود دو قاعدهٔ جدا نوشت، ولی وقتی رنگشان یکی است، می‌توانی با یک \u003Ccode>,\u003C\u002Fcode> هر دو را در یک قاعده جمع کنی:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>h1, h2 {\n  color: navy;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>آن \u003Ccode>,\u003C\u002Fcode> یعنی «و همچنین». این قاعده می‌گوید «به \u003Ccode><h1>\u003C\u002Fcode> \u003Cstrong>و\u003C\u002Fstrong> به \u003Ccode><h2>\u003C\u002Fcode> این رنگ را بده». اگر ده نوع را بخواهی یک‌شکل کنی، همه را با \u003Ccode>,\u003C\u002Fcode> پشتِ هم می‌آوری، به‌جای ده قاعدهٔ تکراری.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> تیترِ اصلی «خوراکی‌های محبوب من» و هر دو تیترِ بخش («شیرینی‌ها» و «ترش‌ها») باید سرمه‌ای شده باشند. متنِ پاراگراف‌ها و آیتم‌های فهرست هنوز دست‌نخورده‌اند.\u003C\u002Fp>\n\u003Cp>selectorِ نوع جای خودش را دارد و قوی است: وقتی می‌خواهی یک پیش‌فرضِ کلی برای \u003Cstrong>همهٔ\u003C\u002Fstrong> عنصرهای یک نوع بگذاری — مثلاً همهٔ پاراگراف‌های سایت یک رنگ، یا همهٔ لینک‌ها یک شکل — دقیقاً همین را می‌خواهی. برای همین معمولاً قاعده‌های نوع را اول می‌نویسی (پیش‌فرضِ کلیِ سایت) و بعد با selector های دقیق‌ترِ این فصل استثناها را می‌سازی. این همان لایه‌به‌لایه‌فکرکردن است که پشتش را در فصل بعد کامل می‌بینی.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> آن \u003Ccode>,\u003C\u002Fcode> را جا نینداز. \u003Ccode>h1, h2\u003C\u002Fcode> یعنی «هر دو تیتر»، ولی \u003Ccode>h1 h2\u003C\u002Fcode> (بدونِ \u003Ccode>,\u003C\u002Fcode>) معنیِ کاملاً دیگری دارد که همین چند بخش بعد می‌بینی‌اش و به یک \u003Ccode><h2>\u003C\u002Fcode>ِ داخلِ یک \u003Ccode><h1>\u003C\u002Fcode> اشاره می‌کند — چیزی که تقریباً هیچ‌وقت وجود ندارد. یک ویرگولِ کوچک، دو معنیِ خیلی متفاوت.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":35,"html":36},"۲. class: یک برچسب که می‌شود بارها به‌کارش برد","\u003Ch2 id=\"۲-class-یک-برچسب-که-می‌شود-بارها-به‌کارش-برد\">۲. \u003Ccode>class\u003C\u002Fcode>: یک برچسب که می‌شود بارها به‌کارش برد\u003Ca class=\"head-anchor\" href=\"#%DB%B2-class-%DB%8C%DA%A9-%D8%A8%D8%B1%DA%86%D8%B3%D8%A8-%DA%A9%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B4%D9%88%D8%AF-%D8%A8%D8%A7%D8%B1%D9%87%D8%A7-%D8%A8%D9%87%E2%80%8C%DA%A9%D8%A7%D8%B1%D8%B4-%D8%A8%D8%B1%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>type selector همهٔ عنصرهای یک نوع را با هم می‌گیرد. ولی اگر فقط \u003Cstrong>بعضی\u003C\u002Fstrong> از \u003Ccode><p>\u003C\u002Fcode> ها را بخواهی چه؟ در صفحهٔ ما دو پاراگراف هست که یک نقش دارند: هر دو یک توضیحِ کوتاهِ کناری‌اند. به این دو، در HTML یک برچسب داده‌ایم: \u003Ccode>class="note"\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>\u003Ccode>class\u003C\u002Fcode> یک attribute است که تو انتخابش می‌کنی؛ مثلِ یک برچسب که روی هر عنصری که بخواهی می‌چسبانی. از داخلِ CSS، این برچسب را با یک \u003Ccode>.\u003C\u002Fcode> قبل از اسمش نشانه می‌گیری:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.note {\n  color: gray;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>آن \u003Ccode>.\u003C\u002Fcode> علامتِ «این یک class است» می‌دهد. این قاعده به \u003Cstrong>هر\u003C\u002Fstrong> عنصری که \u003Ccode>class="note"\u003C\u002Fcode> دارد می‌خورد، فرقی ندارد \u003Ccode><p>\u003C\u002Fcode> باشد یا چیزِ دیگر.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> هر دو پاراگرافِ توضیح — «اینها را همیشه دوست دارم.» و «اینها بستگی به حالم دارد.» — باید خاکستری شده باشند، ولی آیتم‌های فهرست نه. یک برچسب نوشتی و به دو جا با هم خورد.\u003C\u002Fp>\n\u003Cp>همین است که \u003Ccode>class\u003C\u002Fcode> را این‌قدر پرکاربرد می‌کند: \u003Cstrong>قابلِ تکرار\u003C\u002Fstrong> است. یک برچسب را روی هر تعداد عنصر که بخواهی می‌گذاری و همه با یک قاعده استایل می‌گیرند. حالا بیا خوراکی‌های محبوب‌تر را برجسته کنیم؛ در HTML به دو تا \u003Ccode><li>\u003C\u002Fcode> برچسبِ \u003Ccode>class="fav"\u003C\u002Fcode> داده‌ایم. این قاعده را اضافه کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.favorite {\n  background-color: gold;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>نگاه کن به فهرست. هیچ آیتمی طلایی نشد. باز هم نه خطایی، نه تغییری — سکوت.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> طلایی‌شدن اتفاق نیفتاد چون selector به هیچ عنصری نمی‌خورد. در HTML برچسب \u003Ccode>fav\u003C\u002Fcode> است، ولی ما در CSS نوشتیم \u003Ccode>.favorite\u003C\u002Fcode>. مرورگر دنبالِ عنصری با \u003Ccode>class="favorite"\u003C\u002Fcode> گشت، پیدا نکرد، و قاعده را روی هوا رها کرد. selectorِ class باید \u003Cstrong>مو‌به‌مو\u003C\u002Fstrong> با اسمِ داخلِ HTML یکی باشد — حتی یک حرفِ فرق، یعنی به هیچ‌چیز نمی‌خورد. اسم را درست کن:\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.fav {\n  background-color: gold;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا «شکلات» و «آلوچه» — همان دو آیتمی که برچسبِ \u003Ccode>fav\u003C\u002Fcode> دارند — پس‌زمینهٔ طلایی گرفتند. بقیهٔ آیتم‌ها دست‌نخورده‌اند.\u003C\u002Fp>\n\u003Cp>این یک درسِ کلیدیِ selector هاست: \u003Cstrong>selectorی که به هیچ‌چیز نمی‌خورد، خطا نمی‌دهد؛ فقط بی‌اثر است.\u003C\u002Fstrong> پس اگر یک قاعده کار نکرد، بعد از چک‌کردنِ اتصالِ فایل (فصل ۱)، مظنونِ بعدی این است که اسمِ selector با HTML جور نیست — یک غلطِ املایی، یک حرفِ کم‌وزیاد، یا حتی حروفِ بزرگ و کوچک که در class فرق دارند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> یک سناریوی واقعی: به دستیار AI ات بگو «این قاعدهٔ CSS را نوشتم ولی رنگ اعمال نمی‌شود، چرا؟» و کد را بده. این یک کاربردِ خوبِ AI است — کمک برای \u003Cstrong>فهمیدنِ\u003C\u002Fstrong> یک مشکل. ولی همان‌جا قانونِ سومِ ما یادت باشد: \u003Cstrong>AI هم اشتباه می‌کند.\u003C\u002Fstrong> ممکن است با اطمینان بگوید مشکل از property توست، در حالی که مشکل یک غلطِ املایی در اسمِ class است. هر حدسی که داد، خودت در آزمایشگاه امتحانش کن؛ چیزی که با چشمت دیدی حرفِ آخر را می‌زند، نه توضیحِ AI.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":20,"heading":38,"html":39},"۳. id: عنصرِ یکتا، و چرا class انتخابِ اول است","\u003Ch2 id=\"۳-id-عنصرِ-یکتا-و-چرا-class-انتخابِ-اول-است\">۳. \u003Ccode>id\u003C\u002Fcode>: عنصرِ یکتا، و چرا \u003Ccode>class\u003C\u002Fcode> انتخابِ اول است\u003Ca class=\"head-anchor\" href=\"#%DB%B3-id-%D8%B9%D9%86%D8%B5%D8%B1%D9%90-%DB%8C%DA%A9%D8%AA%D8%A7-%D9%88-%DA%86%D8%B1%D8%A7-class-%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8%D9%90-%D8%A7%D9%88%D9%84-%D8%A7%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بعضی عنصرها در صفحه فقط یکی‌اند و یکتا: نوارِ بالای صفحه، یک ناحیهٔ به‌خصوص. برای اینها یک attributeِ دیگر هست: \u003Ccode>id\u003C\u002Fcode>. در صفحهٔ ما بخشِ شیرینی‌ها \u003Ccode>id="sweet"\u003C\u002Fcode> دارد. از CSS، id را با یک \u003Ccode>#\u003C\u002Fcode> قبل از اسمش نشانه می‌گیری:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>#sweet {\n  background-color: cornsilk;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> کلِ بخشِ «شیرینی‌ها» باید یک پس‌زمینهٔ کِرِمیِ ملایم گرفته باشد، ولی بخشِ «ترش‌ها» نه.\u003C\u002Fp>\n\u003Cp>ظاهراً \u003Ccode>id\u003C\u002Fcode> و \u003Ccode>class\u003C\u002Fcode> یک کار می‌کنند — هر دو یک عنصر را نشانه می‌گیرند. پس چرا دو تا؟ تفاوتِ اصلی در یک قانون است: \u003Cstrong>هر \u003Ccode>id\u003C\u002Fcode> در کلِ صفحه فقط یک بار مجاز است.\u003C\u002Fstrong> \u003Ccode>id\u003C\u002Fcode> یعنی «این عنصرِ یکتا». ولی یک \u003Ccode>class\u003C\u002Fcode> را می‌توانی روی هر تعداد عنصر بگذاری — همان‌طور که \u003Ccode>note\u003C\u002Fcode> را روی دو پاراگراف گذاشتیم.\u003C\u002Fp>\n\u003Cp>برای همین \u003Cstrong>\u003Ccode>class\u003C\u002Fcode> انتخابِ پیش‌فرضِ توست، نه \u003Ccode>id\u003C\u002Fcode>.\u003C\u002Fstrong> استایل معمولاً چیزی است که می‌خواهی تکرارش کنی: همهٔ کارت‌ها، همهٔ دکمه‌ها، همهٔ هشدارها یک‌شکل. \u003Ccode>class\u003C\u002Fcode> دقیقاً برای همین ساخته شده. \u003Ccode>id\u003C\u002Fcode> یکتاست و برای استایل زیادی سفت‌وسخت است؛ به‌دردِ کارهای دیگری می‌خورد (مثلِ همان \u003Ccode>#id\u003C\u002Fcode>ی که در ترم ۱ برای پرش داخلِ صفحه دیدی). قانونِ ساده: \u003Cstrong>تا وقتی دلیلِ محکمی برای \u003Ccode>id\u003C\u002Fcode> نداری، \u003Ccode>class\u003C\u002Fcode> بزن.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>یک مثالِ ملموس: در یک فروشگاه، دکمهٔ «افزودن به سبد» ده‌ها بار روی صفحه تکرار می‌شود و همه باید یک‌شکل باشند — این آشکارا کارِ \u003Ccode>class\u003C\u002Fcode> است. ولی نوارِ جست‌وجوی بالای صفحه فقط یکی است و یکتاست. هر وقت شک کردی، یک سؤالِ ساده از خودت بپرس: «آیا ممکن است روزی بیش از یکی از این چیز روی صفحه داشته باشم؟» اگر جواب حتی ممکن است بله باشد، \u003Ccode>class\u003C\u002Fcode> بزن. \u003Ccode>id\u003C\u002Fcode> را برای چیزی نگه دار که مطمئنی همیشه یکی می‌ماند.\u003C\u002Fp>\n\u003Cp>قبل از ادامه، جواب بده: می‌خواهی «قیمتِ تخفیف‌خورده» را در ده‌ها کارتِ محصول قرمز کنی. \u003Ccode>class\u003C\u002Fcode> یا \u003Ccode>id\u003C\u002Fcode>؟\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> \u003Ccode>class\u003C\u002Fcode>. چون این استایل قرار است روی ده‌ها عنصر تکرار شود، و \u003Ccode>id\u003C\u002Fcode> در هر صفحه فقط یک بار مجاز است. یک \u003Ccode>class="sale"\u003C\u002Fcode> بساز و روی همهٔ قیمت‌های تخفیف‌خورده بگذار. هر وقت چیزی را می‌خواهی روی بیش از یک عنصر ببینی، خودبه‌خود یعنی \u003Ccode>class\u003C\u002Fcode>.\u003C\u002Fp>\n",{"kind":20,"heading":41,"html":42},"۴. selectorِ نسبی: با یک فاصله، «داخلِ»","\u003Ch2 id=\"۴-selectorِ-نسبی-با-یک-فاصله-داخلِ\">۴. selectorِ نسبی: با یک فاصله، «داخلِ»\u003Ca class=\"head-anchor\" href=\"#%DB%B4-selector%D9%90-%D9%86%D8%B3%D8%A8%DB%8C-%D8%A8%D8%A7-%DB%8C%DA%A9-%D9%81%D8%A7%D8%B5%D9%84%D9%87-%D8%AF%D8%A7%D8%AE%D9%84%D9%90\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا اینجا هر selector یک عنصر را مستقیم نشانه گرفت. ولی گاهی می‌خواهی بگویی «فقط لینک‌هایی که \u003Cstrong>داخلِ\u003C\u002Fstrong> منو هستند». در صفحهٔ ما دو جور لینک هست: لینک‌های داخلِ \u003Ccode><nav>\u003C\u002Fcode>. اگر بنویسی \u003Ccode>a\u003C\u002Fcode>, به هر لینکِ صفحه می‌خورد. ولی اگر بین دو selector یک \u003Cstrong>فاصله\u003C\u002Fstrong> بگذاری، معنی عوض می‌شود:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>nav a {\n  color: teal;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>آن فاصلهٔ بینِ \u003Ccode>nav\u003C\u002Fcode> و \u003Ccode>a\u003C\u002Fcode> یعنی «هر \u003Ccode><a>\u003C\u002Fcode>یی که \u003Cstrong>داخلِ\u003C\u002Fstrong> یک \u003Ccode><nav>\u003C\u002Fcode> است». به این می‌گویند descendant selector. لینک‌های بیرونِ منو دست‌نخورده می‌مانند.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> دو لینکِ منو («شیرینی‌ها» و «ترش‌ها» بالای صفحه) باید سبزآبی (teal) شده باشند. چون در این صفحه لینکِ دیگری بیرونِ منو نداریم، برای دیدنِ تفاوت یک \u003Ccode><a href="#">تماس<\u002Fa>\u003C\u002Fcode> بیرونِ \u003Ccode><nav>\u003C\u002Fcode> و داخلِ \u003Ccode><main>\u003C\u002Fcode> اضافه کن و ببین آن سبزآبی نمی‌شود — چون داخلِ \u003Ccode><nav>\u003C\u002Fcode> نیست.\u003C\u002Fp>\n\u003Cp>چرا descendant selector این‌قدر پرکاربرد است؟ چون به تو اجازه می‌دهد یک عنصر را بر اساسِ \u003Cstrong>جایی که هست\u003C\u002Fstrong> استایل بدهی، نه فقط بر اساسِ نوعش. همان \u003Ccode><a>\u003C\u002Fcode>، وقتی داخلِ منوست یک شکل می‌گیرد و وقتی وسطِ یک پاراگراف است شکلِ دیگر — بدونِ اینکه به هیچ‌کدام \u003Ccode>class\u003C\u002Fcode> بدهی. به این «استایل بر اساسِ زمینه» می‌گویند و یکی از قوی‌ترین ایده‌های CSS است.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> فاصله را با \u003Ccode>,\u003C\u002Fcode> قاطی نکن. \u003Ccode>nav a\u003C\u002Fcode> (با فاصله) یعنی «\u003Ccode><a>\u003C\u002Fcode>ِ داخلِ \u003Ccode><nav>\u003C\u002Fcode>»، ولی \u003Ccode>nav, a\u003C\u002Fcode> (با ویرگول) یعنی «\u003Ccode><nav>\u003C\u002Fcode> و همچنین هر \u003Ccode><a>\u003C\u002Fcode>ِ صفحه». اولی یک زیرمجموعهٔ کوچک را هدف می‌گیرد، دومی هر دو نوع را کاملاً. همین یک نویسه فرقِ بینِ «داخلِ» و «و همچنین» است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>اینها همهٔ فایلِ \u003Ccode>styles.css\u003C\u002Fcode>ِ این فصل است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>\u002F* styles.css *\u002F\nh1, h2 {\n  color: navy;\n}\n\nnav a {\n  color: teal;\n}\n\n.note {\n  color: gray;\n}\n\n.fav {\n  background-color: gold;\n}\n\n#sweet {\n  background-color: cornsilk;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و این هم HTMLِ کاملِ صفحه که برچسب‌ها و id هایش را از CSSِ بالا نشانه گرفتیم:\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    <title>خوراکی‌های من<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <header>\n      <h1>خوراکی‌های محبوب من<\u002Fh1>\n      <nav>\n        <a href="#sweet">شیرینی‌ها<\u002Fa>\n        <a href="#sour">ترش‌ها<\u002Fa>\n      <\u002Fnav>\n    <\u002Fheader>\n\n    <main>\n      <section id="sweet">\n        <h2>شیرینی‌ها<\u002Fh2>\n        <p class="note">اینها را همیشه دوست دارم.<\u002Fp>\n        <ul>\n          <li>بستنی<\u002Fli>\n          <li class="fav">شکلات<\u002Fli>\n          <li>حلوا<\u002Fli>\n        <\u002Ful>\n      <\u002Fsection>\n\n      <section id="sour">\n        <h2>ترش‌ها<\u002Fh2>\n        <p class="note">اینها بستگی به حالم دارد.<\u002Fp>\n        <ul>\n          <li>لواشک<\u002Fli>\n          <li class="fav">آلوچه<\u002Fli>\n        <\u002Ful>\n      <\u002Fsection>\n    <\u002Fmain>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-descendant-selector.30374166d7.160.webp 160w, \u002F_img\u002F02-image-descendant-selector.30374166d7.320.webp 320w, \u002F_img\u002F02-image-descendant-selector.30374166d7.640.webp 640w, \u002F_img\u002F02-image-descendant-selector.30374166d7.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-descendant-selector.30374166d7.1280.jpg\" srcset=\"\u002F_img\u002F02-image-descendant-selector.30374166d7.160.jpg 160w, \u002F_img\u002F02-image-descendant-selector.30374166d7.320.jpg 320w, \u002F_img\u002F02-image-descendant-selector.30374166d7.640.jpg 640w, \u002F_img\u002F02-image-descendant-selector.30374166d7.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک نمودار از عنصرهای تودرتو: چند لینک داخلِ یک جعبهٔ منو رنگی شده‌اند و لینک‌های بیرونِ آن جعبه دست‌نخورده مانده‌اند، تا معنیِ «داخلِ» را نشان دهد\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n",{"kind":20,"heading":44,"html":45},"واژه‌های تازهٔ این فصل","\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>type selector\u003C\u002Ftd>\n\u003Ctd>تایپ سِلِکتور\u003C\u002Ftd>\n\u003Ctd>عنصرها را با اسمِ tag هدف می‌گیرد (مثل \u003Ccode>p\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>class\u003C\u002Ftd>\n\u003Ctd>کلَس\u003C\u002Ftd>\n\u003Ctd>برچسبی که تو می‌سازی و روی چند عنصر تکرارش می‌کنی؛ در CSS با \u003Ccode>.\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>id\u003C\u002Ftd>\n\u003Ctd>آی‌دی\u003C\u002Ftd>\n\u003Ctd>شناسهٔ یکتا، در هر صفحه فقط یک بار؛ در CSS با \u003Ccode>#\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>descendant selector\u003C\u002Ftd>\n\u003Ctd>دِسِندِنت سِلِکتور\u003C\u002Ftd>\n\u003Ctd>با یک فاصله: عنصری که داخلِ عنصرِ دیگری است (مثل \u003Ccode>nav a\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>grouping\u003C\u002Ftd>\n\u003Ctd>گروپینگ\u003C\u002Ftd>\n\u003Ctd>با \u003Ccode>,\u003C\u002Fcode> چند selector را در یک قاعده جمع‌کردن\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":47,"heading":48,"html":49},"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>class\u003C\u002Fcode> را به‌جای \u003Ccode>id\u003C\u002Fcode> انتخابِ اولت می‌گذاری؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> به همین صفحهٔ خوراکی یک بخشِ سومِ «نوشیدنی‌ها» اضافه کن با چند \u003Ccode><li>\u003C\u002Fcode>. حالا با selector ها: تیترِ بخشِ جدید را با همان قاعدهٔ گروهیِ تیترها هم‌رنگ کن، یک \u003Ccode>class="fav"\u003C\u002Fcode> روی نوشیدنیِ محبوبت بگذار تا خودبه‌خود طلایی شود، و با یک descendant selector فقط لینک‌های داخلِ منو را دستکاری کن.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک قاعده بنویس که عمداً به هیچ‌چیز نخورد — مثلاً یک class که در HTML وجود ندارد — و ببین صفحه بی‌سروصدا هیچ عکس‌العملی نشان نمی‌دهد. بعد یک حرفش را درست کن تا ناگهان اعمال شود. حالا سراغِ یک صفحهٔ واقعیِ بزرگ برو، روی یک عنصر راست‌کلیک کن و \u003Ccode>Inspect\u003C\u002Fcode> را بزن؛ ببین آن عنصر چند تا \u003Ccode>class\u003C\u002Fcode> دارد. حدس بزن چرا سازنده به‌جای \u003Ccode>id\u003C\u002Fcode> از \u003Ccode>class\u003C\u002Fcode> استفاده کرده.\u003C\u002Fp>\n",{"kind":20,"heading":51,"html":52},"در فصل بعد","\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>الان می‌توانی هر عنصری را دقیق نشانه بگیری. ولی یک سؤالِ بزرگ باقی مانده که همین فصل چند بار لبه‌اش رفتیم: وقتی \u003Cstrong>چند\u003C\u002Fstrong> قاعده به یک عنصر بخورند و رنگ‌های متفاوتی بخواهند، کدام برنده می‌شود؟ چرا آن \u003Ccode>h1\u003C\u002Fcode>ِ فصل قبل بر رنگِ \u003Ccode>body\u003C\u002Fcode> غلبه کرد؟ فصل بعد — که کوتاه‌ترین و مهم‌ترین فصلِ این ترم است — دقیقاً همین را جواب می‌دهد: \u003Ccode>cascade\u003C\u002Fcode>، \u003Ccode>specificity\u003C\u002Fcode> و \u003Ccode>inheritance\u003C\u002Fcode>. این همان جایی است که بیشترِ تازه‌کارها گیر می‌کنند؛ ما با شمردن، نه حدس‌زدن، از رویش رد می‌شویم.\u003C\u002Fp>\n",{"course":54,"entitled":62,"lessons":63,"payments_enabled":62,"terms":249,"live":5},{"active_window":55,"effective_price_toman":56,"free":5,"lesson_count":57,"price_toman":58,"slug":59,"summary_fa":60,"title_fa":61},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[64,67,70,73,77,81,85,89,93,97,101,102,103,104,107,110,113,116,119,122,125,129,132,135,138,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246],{"free_preview":5,"order":11,"slug":65,"source":8,"term":11,"title_fa":66},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":6,"slug":68,"source":8,"term":11,"title_fa":69},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":15,"slug":71,"source":8,"term":11,"title_fa":72},"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":74,"slug":75,"source":8,"term":11,"title_fa":76},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":78,"slug":79,"source":8,"term":11,"title_fa":80},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":82,"slug":83,"source":8,"term":11,"title_fa":84},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":86,"slug":87,"source":8,"term":11,"title_fa":88},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":90,"slug":91,"source":8,"term":11,"title_fa":92},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":94,"slug":95,"source":8,"term":11,"title_fa":96},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":98,"slug":99,"source":8,"term":11,"title_fa":100},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":11,"slug":12,"source":8,"term":6,"title_fa":13},{"free_preview":5,"order":6,"slug":7,"source":8,"term":6,"title_fa":9},{"free_preview":5,"order":15,"slug":16,"source":8,"term":6,"title_fa":17},{"free_preview":5,"order":74,"slug":105,"source":8,"term":6,"title_fa":106},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":78,"slug":108,"source":8,"term":6,"title_fa":109},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":82,"slug":111,"source":8,"term":6,"title_fa":112},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":86,"slug":114,"source":8,"term":6,"title_fa":115},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":90,"slug":117,"source":8,"term":6,"title_fa":118},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":94,"slug":120,"source":8,"term":6,"title_fa":121},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":98,"slug":123,"source":8,"term":6,"title_fa":124},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":126,"slug":127,"source":8,"term":6,"title_fa":128},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":11,"slug":130,"source":8,"term":15,"title_fa":131},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":6,"slug":133,"source":8,"term":15,"title_fa":134},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":15,"slug":136,"source":8,"term":15,"title_fa":137},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":74,"slug":139,"source":8,"term":15,"title_fa":140},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":78,"slug":142,"source":8,"term":15,"title_fa":143},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":82,"slug":145,"source":8,"term":15,"title_fa":146},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":86,"slug":148,"source":8,"term":15,"title_fa":149},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":90,"slug":151,"source":8,"term":15,"title_fa":152},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":94,"slug":154,"source":8,"term":15,"title_fa":155},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":98,"slug":157,"source":8,"term":15,"title_fa":158},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":126,"slug":160,"source":8,"term":15,"title_fa":161},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":11,"slug":163,"source":8,"term":74,"title_fa":164},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":6,"slug":166,"source":8,"term":74,"title_fa":167},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":15,"slug":169,"source":8,"term":74,"title_fa":170},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":74,"slug":172,"source":8,"term":74,"title_fa":173},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":78,"slug":175,"source":8,"term":74,"title_fa":176},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":82,"slug":178,"source":8,"term":74,"title_fa":179},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":86,"slug":181,"source":8,"term":74,"title_fa":182},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":90,"slug":184,"source":8,"term":74,"title_fa":185},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":11,"slug":187,"source":8,"term":78,"title_fa":188},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":6,"slug":190,"source":8,"term":78,"title_fa":191},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":15,"slug":193,"source":8,"term":78,"title_fa":194},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":74,"slug":196,"source":8,"term":78,"title_fa":197},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":78,"slug":199,"source":8,"term":78,"title_fa":200},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":82,"slug":202,"source":8,"term":78,"title_fa":203},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":86,"slug":205,"source":8,"term":78,"title_fa":206},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":90,"slug":208,"source":8,"term":78,"title_fa":209},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":94,"slug":211,"source":8,"term":78,"title_fa":212},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":98,"slug":214,"source":8,"term":78,"title_fa":215},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":11,"slug":217,"source":8,"term":82,"title_fa":218},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":6,"slug":220,"source":8,"term":82,"title_fa":221},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":15,"slug":223,"source":8,"term":82,"title_fa":224},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":74,"slug":226,"source":8,"term":82,"title_fa":227},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":78,"slug":229,"source":8,"term":82,"title_fa":230},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":82,"slug":232,"source":8,"term":82,"title_fa":233},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":86,"slug":235,"source":8,"term":82,"title_fa":236},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":90,"slug":238,"source":8,"term":82,"title_fa":239},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":94,"slug":241,"source":8,"term":82,"title_fa":242},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":98,"slug":244,"source":8,"term":82,"title_fa":245},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":126,"slug":247,"source":8,"term":82,"title_fa":248},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827104965]