[{"data":1,"prerenderedAt":253},["ShallowReactive",2],{"lesson:t5-s09-has-selector":3,"course:taropood":57},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,9,"t5-s09-has-selector","book",5,"فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},8,"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},10,"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",[20,24,27,32,35,38,41,44,47,50,54],{"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>تا حالا هر selector یی که نوشتی رو به \u003Cstrong>پایین\u003C\u002Fstrong> بود: یک عنصر را انتخاب می‌کردی، یا فرزندش را، یا برادرِ بعدی‌اش. هیچ‌وقت نتوانستی بگویی «این عنصر را انتخاب کن، \u003Cstrong>چون\u003C\u002Fstrong> فرزندی با فلان حالت دارد». در این فصل یک selector تازه می‌بینی که همین را ممکن می‌کند: \u003Ccode>:has()\u003C\u002Fcode>. با آن یک کارت می‌تواند وقتی checkbox داخلش تیک بخورد، \u003Cstrong>خودش\u003C\u002Fstrong> عوض شود — و این یعنی تعاملِ واقعی، بدونِ حتی یک خط JavaScript. آخر فصل کارتی داری که با یک تیک، از روشن به تیره می‌رود.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-parent-selector.6d47834939.160.webp 160w, \u002F_img\u002F01-image-parent-selector.6d47834939.320.webp 320w, \u002F_img\u002F01-image-parent-selector.6d47834939.640.webp 640w, \u002F_img\u002F01-image-parent-selector.6d47834939.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-parent-selector.6d47834939.1280.jpg\" srcset=\"\u002F_img\u002F01-image-parent-selector.6d47834939.160.jpg 160w, \u002F_img\u002F01-image-parent-selector.6d47834939.320.jpg 320w, \u002F_img\u002F01-image-parent-selector.6d47834939.640.jpg 640w, \u002F_img\u002F01-image-parent-selector.6d47834939.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک کارت که یک checkbox داخلش دارد؛ از خودِ کارت یک فلش رو به بالا به کلِ کارت برمی‌گردد و نشان می‌دهد که کارت بر اساسِ وضعیتِ فرزندش رنگ عوض می‌کند\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>بگویی چرا با selector معمولی نمی‌شود یک عنصر را بر اساسِ فرزندش استایل داد\u003C\u002Fli>\n\u003Cli>با \u003Ccode>:has()\u003C\u002Fcode> یک عنصرِ والد را بر اساسِ چیزی که \u003Cstrong>درونش\u003C\u002Fstrong> است انتخاب کنی\u003C\u002Fli>\n\u003Cli>\u003Ccode>:has()\u003C\u002Fcode> را با \u003Ccode>:checked\u003C\u002Fcode> و \u003Ccode>:invalid\u003C\u002Fcode> ترکیب کنی تا صفحه بدونِ JavaScript واکنش نشان دهد\u003C\u002Fli>\n\u003Cli>با \u003Ccode>:target\u003C\u002Fcode> بر اساسِ آدرسِ صفحه یک بخش را نشان یا پنهان کنی\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>:checked\u003C\u002Fcode> و \u003Ccode>:invalid\u003C\u002Fcode> — حالتِ فرم که \u003Ccode>:has()\u003C\u002Fcode> روی آن‌ها می‌نشیند.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۷ (همین ترم):\u003C\u002Fstrong> \u003Ccode>transition\u003C\u002Fcode> — تا تغییرِ کارت نرم باشد نه ناگهانی.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۴ (همین ترم):\u003C\u002Fstrong> \u003Ccode>accent-color\u003C\u002Fcode> — رنگِ خودِ checkbox.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک کارت با یک checkbox می‌بینی که هرچه تیک را بزنی، هیچ اتفاقی نمی‌افتد. کارِ این فصل این است که با :has() کاری کنی خودِ کارت به این تیک واکنش نشان دهد","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-5-interaction\u002Fsession-09-has-selector",{"kind":21,"heading":33,"html":34},"۱. آرزوی ناممکن: یک والد که به فرزندش واکنش می‌دهد","\u003Ch2 id=\"۱-آرزوی-ناممکن-یک-والد-که-به-فرزندش-واکنش-می‌دهد\">۱. آرزوی ناممکن: یک والد که به فرزندش واکنش می‌دهد\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%A2%D8%B1%D8%B2%D9%88%DB%8C-%D9%86%D8%A7%D9%85%D9%85%DA%A9%D9%86-%DB%8C%DA%A9-%D9%88%D8%A7%D9%84%D8%AF-%DA%A9%D9%87-%D8%A8%D9%87-%D9%81%D8%B1%D8%B2%D9%86%D8%AF%D8%B4-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%D9%85%DB%8C%E2%80%8C%D8%AF%D9%87%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>می‌خواهیم وقتی checkbox داخلِ کارت تیک می‌خورد، \u003Cstrong>کلِ کارت\u003C\u002Fstrong> تیره شود. اولین فکری که به ذهنت می‌رسد این است: «کارت را بگیر، checkbox تیک‌خورده‌اش را پیدا کن، رنگ را عوض کن». پس این را می‌نویسی:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card input:checked {\n  background-color: #1e2530;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>در آزمایشگاه امتحانش کن و تیک را بزن. \u003Cstrong>کارت هیچ تغییری نمی‌کند.\u003C\u002Fstrong> نهایتاً خودِ کادرِ کوچکِ checkbox کمی فرق می‌کند، ولی کارت همان روشنِ قبلی می‌ماند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> این خطا نیست، این یک محدودیتِ واقعیِ selector هاست. \u003Ccode>.card input:checked\u003C\u002Fcode> یعنی «آن checkbox تیک‌خورده‌ای که \u003Cstrong>داخلِ\u003C\u002Fstrong> کارت است» — تو داری خودِ checkbox را انتخاب می‌کنی، نه کارت را. همهٔ selector هایی که تا حالا دیدی رو به پایین کار می‌کنند: از والد به فرزند. هیچ combinator ای وجود ندارد که «برو بالا به والد». برای همین این کار سال‌ها فقط با JavaScript ممکن بود — تا اینکه \u003Ccode>:has()\u003C\u002Fcode> آمد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":36,"html":37},"۲. :has(): selectorِ والد","\u003Ch2 id=\"۲-has-selectorِ-والد\">۲. \u003Ccode>:has()\u003C\u002Fcode>: selectorِ والد\u003Ca class=\"head-anchor\" href=\"#%DB%B2-has-selector%D9%90-%D9%88%D8%A7%D9%84%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>:has()\u003C\u002Fcode> این قفل را می‌شکند. آن را به یک عنصر می‌چسبانی و داخلِ پرانتزش می‌گویی «اگر این عنصر فلان‌چیز را \u003Cstrong>داشته باشد\u003C\u002Fstrong>». نتیجه این است که والد را انتخاب می‌کنی، بر اساسِ آنچه درونش است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.card:has(input:checked) {\n  background-color: #1e2530;\n  color: #f2f4f8;\n  border-color: #2c3644;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>این را بخوان: «کارتی را انتخاب کن \u003Cstrong>که\u003C\u002Fstrong> یک \u003Ccode>input:checked\u003C\u002Fcode> دارد». حالا انتخاب‌شده خودِ کارت است، نه checkbox. این را جای‌گزینِ قاعدهٔ بخش قبل کن و در آزمایشگاه تیک را بزن.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> با هر تیک، \u003Cstrong>کلِ کارت\u003C\u002Fstrong> از روشن به تیره می‌رود — پس‌زمینه، رنگِ متن و حاشیه، همه با هم — و چون از فصل ۷ یک \u003Ccode>transition\u003C\u002Fcode> روی کارت گذاشته‌ایم، این تغییر نرم اتفاق می‌افتد. تیک را بردار، کارت روشن می‌شود. این همان چیزی است که تا دیروز فقط با JavaScript ممکن بود.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> اسمِ \u003Ccode>:has()\u003C\u002Fcode> را «والدِ» ترجمه نکن؛ دقیق‌تر این است: «عنصری که چیزی را \u003Cstrong>دارد\u003C\u002Fstrong>». می‌تواند بر اساسِ فرزند کار کند، ولی همچنین بر اساسِ برادرِ بعدی — مثلاً \u003Ccode>label:has(+ input:invalid)\u003C\u002Fcode>. ولی مدلِ ذهنیِ ساده‌ات همان «انتخابِ والد بر اساسِ فرزند» است و ۹۰٪ کارها همین است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":39,"html":40},"۳. :has() فقط برای checkbox نیست","\u003Ch2 id=\"۳-has-فقط-برای-checkbox-نیست\">۳. \u003Ccode>:has()\u003C\u002Fcode> فقط برای checkbox نیست\u003Ca class=\"head-anchor\" href=\"#%DB%B3-has-%D9%81%D9%82%D8%B7-%D8%A8%D8%B1%D8%A7%DB%8C-checkbox-%D9%86%DB%8C%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قدرتِ واقعیِ \u003Ccode>:has()\u003C\u002Fcode> این است که با هر selector دیگری ترکیب می‌شود. یک نمونهٔ خیلی کاربردی: یک جعبهٔ فرم که وقتی ورودیِ \u003Cstrong>نامعتبرِ\u003C\u002Fstrong> داخلش خطا دارد (همان \u003Ccode>:invalid\u003C\u002Fcode> فصل ۵)، خودش قرمز شود تا کاربر جای اشکال را ببیند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.field:has(input:invalid) {\n  border-color: #bc3e1c;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>اینجا هم والد (\u003Ccode>.field\u003C\u002Fcode>) دارد بر اساسِ حالتِ فرزندش (\u003Ccode>input:invalid\u003C\u002Fcode>) استایل می‌گیرد — بی‌هیچ JavaScript. قبلاً برای این کار باید با کد به هر ورودی گوش می‌دادی؛ حالا یک خط CSS است.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> \u003Ccode>:has()\u003C\u002Fcode> امروز در همهٔ مرورگرهای اصلی کار می‌کند و می‌توانی بی‌نگرانی به‌کارش ببری. اگر خواستی خیلی محتاط باشی، می‌توانی یک قاعدهٔ مهم را داخلِ \u003Ccode>@supports selector(:has(*))\u003C\u002Fcode> بگذاری تا اگر کسی با مرورگرِ خیلی قدیمی آمد، صفحه دستِ‌کم نشکند — ولی برای بیشترِ کارها لازم نیست.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Ccode>:has()\u003C\u002Fcode> جای خوبی است که AI را هم امتحان کنی، چون جوابش گاهی از دنیای دیروز است:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> از دستیار AI ات بپرس «در CSS چطور یک عنصرِ والد را بر اساسِ حالتِ فرزندش استایل بدهم؟». جالب است که خیلی وقت‌ها اول سراغِ JavaScript می‌رود، چون سال‌ها جوابِ درست همان بود. اگر این‌طور شد، خودت بپرس «با \u003Ccode>:has()\u003C\u002Fcode> بدونِ JavaScript می‌شود؟» و جوابش را در آزمایشگاه چک کن — این خودش درسِ خوبی است که دانشِ AI گاهی از دنیای دیروز است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":42,"html":43},"۴. :target: واکنش به آدرسِ صفحه","\u003Ch2 id=\"۴-target-واکنش-به-آدرسِ-صفحه\">۴. \u003Ccode>:target\u003C\u002Fcode>: واکنش به آدرسِ صفحه\u003Ca class=\"head-anchor\" href=\"#%DB%B4-target-%D9%88%D8%A7%DA%A9%D9%86%D8%B4-%D8%A8%D9%87-%D8%A2%D8%AF%D8%B1%D8%B3%D9%90-%D8%B5%D9%81%D8%AD%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک راهِ دومِ تعاملِ بدونِ JavaScript هم داریم که به‌کار می‌آید: \u003Ccode>:target\u003C\u002Fcode>. یادت هست از ترم ۱ که لینک می‌تواند به یک \u003Ccode>#id\u003C\u002Fcode> داخلِ صفحه بپرد؟ وقتی این اتفاق می‌افتد، آدرسِ صفحه آن \u003Ccode>#id\u003C\u002Fcode> را می‌گیرد، و عنصری که آن \u003Ccode>id\u003C\u002Fcode> را دارد می‌شود «هدف». \u003Ccode>:target\u003C\u002Fcode> دقیقاً همان عنصرِ هدف را انتخاب می‌کند.\u003C\u002Fp>\n\u003Cp>با این می‌شود چیزی را پنهان نگه داشت تا وقتی کاربر رویش لینک بزند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><p><a href="#more">بیشتر بخوان<\u002Fa><\u002Fp>\n<p id="more" class="more">این توضیحِ بیشتر تا وقتی روی لینک نزده‌ای پنهان است.<\u002Fp>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>.more {\n  display: none;\n}\n\n.more:target {\n  display: block;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>روی «بیشتر بخوان» کلیک کن: آدرس به \u003Ccode>#more\u003C\u002Fcode> می‌رود، آن پاراگراف می‌شود \u003Ccode>:target\u003C\u002Fcode> و ظاهر می‌شود — بی‌هیچ JavaScript. \u003Ccode>:checked\u003C\u002Fcode> حالت را در خودِ فرم نگه می‌دارد، \u003Ccode>:target\u003C\u002Fcode> حالت را در آدرسِ صفحه؛ هر دو ابزارِ تعاملِ بی‌جاوااسکریپت‌اند، و در فصل بعد در کنارِ هم یک component کامل می‌سازیم.\u003C\u002Fp>\n",{"kind":21,"heading":45,"html":46},"۵. کد کاملِ این فصل","\u003Ch2 id=\"۵-کد-کاملِ-این-فصل\">۵. کد کاملِ این فصل\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%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>:has()<\u002Ftitle>\n    <link rel="stylesheet" href="styles.css">\n  <\u002Fhead>\n  <body>\n    <article class="card">\n      <h2>کارتِ من<\u002Fh2>\n      <p>این کارت وقتی تیک را بزنی، خودش عوض می‌شود — بدون یک خط JavaScript.<\u002Fp>\n      <label class="toggle">\n        <input type="checkbox">\n        حالتِ تیره\n      <\u002Flabel>\n    <\u002Farticle>\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\n:root {\n  --bg: #f6edda;\n  --card: #ffffff;\n  --ink: #2c2114;\n  --brand: #2a6b93;\n  --line: #d8ccae;\n}\n\nbody {\n  margin: 0;\n  font-family: Tahoma, sans-serif;\n  background-color: var(--bg);\n  color: var(--ink);\n  padding: 40px;\n  line-height: 1.9;\n}\n\n.card {\n  max-width: 360px;\n  margin-inline: auto;\n  padding: 24px;\n  background-color: var(--card);\n  color: var(--ink);\n  border: 1px solid var(--line);\n  border-radius: 16px;\n  transition: background-color 0.3s, color 0.3s, border-color 0.3s;\n}\n\n.card h2 {\n  margin-block: 0 8px;\n}\n\n.toggle {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-block-start: 16px;\n  cursor: pointer;\n  accent-color: var(--brand);\n}\n\n\u002F* :has() -> vaghti card yek checkbox-e checked dashte bashe, khod-e card avaz mishe *\u002F\n.card:has(input:checked) {\n  background-color: #1e2530;\n  color: #f2f4f8;\n  border-color: #2c3644;\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-toggle-card-states.265c085dbc.160.webp 160w, \u002F_img\u002F02-image-toggle-card-states.265c085dbc.320.webp 320w, \u002F_img\u002F02-image-toggle-card-states.265c085dbc.640.webp 640w, \u002F_img\u002F02-image-toggle-card-states.265c085dbc.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-toggle-card-states.265c085dbc.1280.jpg\" srcset=\"\u002F_img\u002F02-image-toggle-card-states.265c085dbc.160.jpg 160w, \u002F_img\u002F02-image-toggle-card-states.265c085dbc.320.jpg 320w, \u002F_img\u002F02-image-toggle-card-states.265c085dbc.640.jpg 640w, \u002F_img\u002F02-image-toggle-card-states.265c085dbc.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"دو حالتِ یک کارت: چپ روشن با checkbox خالی، راست تیره با checkbox تیک‌خورده؛ فلشی از تیک به کلِ کارت نشان می‌دهد که تیک، کارت را تیره کرده\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> کارت با تیک تیره و بی‌تیک روشن می‌شود، و بینشان نرم جابه‌جا می‌شود. حالا یک آزمایشِ کوچک: قاعدهٔ \u003Ccode>.card:has(input:checked)\u003C\u002Fcode> را به \u003Ccode>.card:has(input)\u003C\u002Fcode> عوض کن (بدونِ \u003Ccode>:checked\u003C\u002Fcode>). حالا کارت \u003Cstrong>همیشه\u003C\u002Fstrong> تیره است، چون همیشه یک \u003Ccode>input\u003C\u002Fcode> دارد — این نشان می‌دهد که شرطِ داخلِ پرانتز دقیقاً چه‌کار می‌کند. برگردانش.\u003C\u002Fp>\n",{"kind":21,"heading":48,"html":49},"واژه‌های تازهٔ این فصل","\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>:has()\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>هَز\u003C\u002Ftd>\n\u003Ctd>selector ای که یک عنصر را انتخاب می‌کند بر اساسِ آنچه درونش دارد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>parent selector\u003C\u002Ftd>\n\u003Ctd>پِرِنت سِلِکتور\u003C\u002Ftd>\n\u003Ctd>نامِ خودمانیِ \u003Ccode>:has()\u003C\u002Fcode>؛ انتخابِ والد بر اساسِ فرزند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>:target\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>تارگِت\u003C\u002Ftd>\n\u003Ctd>عنصری که \u003Ccode>id\u003C\u002Fcode> اش با \u003Ccode>#\u003C\u002Fcode> در آدرسِ صفحه یکی است\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":51,"heading":52,"html":53},"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>.card input:checked\u003C\u002Fcode> کارت را تیره نمی‌کند، ولی \u003Ccode>.card:has(input:checked)\u003C\u002Fcode> می‌کند؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک فرمِ کوچک با یک \u003Ccode><label>\u003C\u002Fcode> و یک \u003Ccode><input required>\u003C\u002Fcode> بساز و آن‌ها را داخلِ یک \u003Ccode>.field\u003C\u002Fcode> بگذار. با \u003Ccode>:has()\u003C\u002Fcode> کاری کن وقتی ورودی خالی و نامعتبر است، \u003Ccode>.field\u003C\u002Fcode> یک حاشیهٔ قرمز بگیرد و وقتی معتبر شد، سبز شود. (راهنما: \u003Ccode>:has(input:invalid)\u003C\u002Fcode> و \u003Ccode>:has(input:valid)\u003C\u002Fcode>.)\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک صفحه با سه بخش بساز که هرکدام \u003Ccode>id\u003C\u002Fcode> خودشان را دارند و سه لینک بالای صفحه به آن‌ها می‌پرند. با \u003Ccode>:target\u003C\u002Fcode> کاری کن بخشی که کاربر به آن پریده، یک پس‌زمینهٔ روشن بگیرد تا معلوم باشد کجاست. این را به AI نشان بده و بپرس «آیا این با \u003Ccode>:target\u003C\u002Fcode> بدونِ JavaScript کار می‌کند؟» و جوابش را در مرورگر بسنج.\u003C\u002Fp>\n",{"kind":21,"heading":55,"html":56},"در فصل بعد","\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>الان دو ابزارِ تعاملِ بدونِ JavaScript داری — \u003Ccode>:has()\u003C\u002Fcode> با \u003Ccode>:checked\u003C\u002Fcode>، و \u003Ccode>:target\u003C\u002Fcode> — و کلِ ترم ۵ را هم پشتِ سر گذاشته‌ای: حالت‌ها، combinator ها، pseudo-element ها، فرم و اعتبارسنجی، transform، transition و animation. فصل بعد فصلِ پروژه است: مفهومِ تازه‌ای ندارد و همهٔ این‌ها را در یک component تعاملیِ واقعی — یک آکاردئون که با صفحه‌کلید هم کار می‌کند — کنارِ هم می‌گذاری، همه بدونِ یک خط JavaScript.\u003C\u002Fp>\n",{"course":58,"entitled":66,"lessons":67,"payments_enabled":66,"terms":252,"live":5},{"active_window":59,"effective_price_toman":60,"free":5,"lesson_count":61,"price_toman":62,"slug":63,"summary_fa":64,"title_fa":65},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[68,72,76,80,84,87,91,95,98,101,104,107,110,113,116,119,122,125,128,131,134,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,217,218,219,222,225,228,231,234,237,240,243,246,249],{"free_preview":5,"order":69,"slug":70,"source":8,"term":69,"title_fa":71},1,"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":73,"slug":74,"source":8,"term":69,"title_fa":75},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":77,"slug":78,"source":8,"term":69,"title_fa":79},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":81,"slug":82,"source":8,"term":69,"title_fa":83},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":9,"slug":85,"source":8,"term":69,"title_fa":86},"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":88,"slug":89,"source":8,"term":69,"title_fa":90},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":92,"slug":93,"source":8,"term":69,"title_fa":94},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":12,"slug":96,"source":8,"term":69,"title_fa":97},"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":6,"slug":99,"source":8,"term":69,"title_fa":100},"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":16,"slug":102,"source":8,"term":69,"title_fa":103},"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":69,"slug":105,"source":8,"term":73,"title_fa":106},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":73,"slug":108,"source":8,"term":73,"title_fa":109},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":77,"slug":111,"source":8,"term":73,"title_fa":112},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":81,"slug":114,"source":8,"term":73,"title_fa":115},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":9,"slug":117,"source":8,"term":73,"title_fa":118},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":88,"slug":120,"source":8,"term":73,"title_fa":121},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":92,"slug":123,"source":8,"term":73,"title_fa":124},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":12,"slug":126,"source":8,"term":73,"title_fa":127},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":6,"slug":129,"source":8,"term":73,"title_fa":130},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":16,"slug":132,"source":8,"term":73,"title_fa":133},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":135,"slug":136,"source":8,"term":73,"title_fa":137},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":69,"slug":139,"source":8,"term":77,"title_fa":140},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":73,"slug":142,"source":8,"term":77,"title_fa":143},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":77,"slug":145,"source":8,"term":77,"title_fa":146},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":81,"slug":148,"source":8,"term":77,"title_fa":149},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":9,"slug":151,"source":8,"term":77,"title_fa":152},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":88,"slug":154,"source":8,"term":77,"title_fa":155},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":92,"slug":157,"source":8,"term":77,"title_fa":158},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":12,"slug":160,"source":8,"term":77,"title_fa":161},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":6,"slug":163,"source":8,"term":77,"title_fa":164},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":16,"slug":166,"source":8,"term":77,"title_fa":167},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":135,"slug":169,"source":8,"term":77,"title_fa":170},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":69,"slug":172,"source":8,"term":81,"title_fa":173},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":73,"slug":175,"source":8,"term":81,"title_fa":176},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":77,"slug":178,"source":8,"term":81,"title_fa":179},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":81,"slug":181,"source":8,"term":81,"title_fa":182},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":9,"slug":184,"source":8,"term":81,"title_fa":185},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":88,"slug":187,"source":8,"term":81,"title_fa":188},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":92,"slug":190,"source":8,"term":81,"title_fa":191},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":12,"slug":193,"source":8,"term":81,"title_fa":194},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":69,"slug":196,"source":8,"term":9,"title_fa":197},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":73,"slug":199,"source":8,"term":9,"title_fa":200},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":77,"slug":202,"source":8,"term":9,"title_fa":203},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":81,"slug":205,"source":8,"term":9,"title_fa":206},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":9,"slug":208,"source":8,"term":9,"title_fa":209},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":88,"slug":211,"source":8,"term":9,"title_fa":212},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":92,"slug":214,"source":8,"term":9,"title_fa":215},"t5-s07-transitions","فصل ۰۷ — transition",{"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":69,"slug":220,"source":8,"term":88,"title_fa":221},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":73,"slug":223,"source":8,"term":88,"title_fa":224},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":77,"slug":226,"source":8,"term":88,"title_fa":227},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":81,"slug":229,"source":8,"term":88,"title_fa":230},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":9,"slug":232,"source":8,"term":88,"title_fa":233},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":88,"slug":235,"source":8,"term":88,"title_fa":236},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":92,"slug":238,"source":8,"term":88,"title_fa":239},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":12,"slug":241,"source":8,"term":88,"title_fa":242},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":6,"slug":244,"source":8,"term":88,"title_fa":245},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":16,"slug":247,"source":8,"term":88,"title_fa":248},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":135,"slug":250,"source":8,"term":88,"title_fa":251},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827105713]