مدرس: خب قبلاً درباره‌ی شبه‌کلاس‌ها صحبت کردیم
حالا بیایید درباره‌ی شبه‌المان‌ها (pseudo-elements) صحبت کنیم
که یک قابلیت جالب در CSS هست و ارزش یاد گرفتن داره
پس شبه‌المان‌ها در اصل
المان‌هایی هستن که در HTML وجود ندارن
اما ما می‌تونیم اون‌ها رو با CSS انتخاب و استایل بدیم
و چند نمونه‌ی رایج از اون‌ها هستن
اولین حرف یک پاراگراف یا
اولین خط یک پاراگراف یا بخشی از متن
پس بیایید با اون مثال اول شروع کنیم
که گفتم: اولین حرف
کاری که می‌تونیم با pseudo-element اول‌حرف (first-letter) انجام بدیم اینه که
اولین حرف یک متن رو انتخاب کنیم
اینجا اولین حرف h1 هست که این ایموجی میشه
و بعد می‌تونیم اون رو متفاوت استایل بدیم
و با این کار می‌تونیم مشکل این رو حل کنیم
که الان این بخش ایتالیکه در حالی که منطقی نیست
در نهایت اینطوری به نظر میاد:
دیگه ایتالیک نیست و حتی یک فاصله هم
در سمت راستش داریم
خب ببینیم چطوری کار می‌کنه
بیایید بریم پایین‌تر و بگیم h1
یعنی داریم h1 رو انتخاب می‌کنیم و بعد
شبه‌المان با دو تا دونقطه نوشته میشه
پس::: First-letter
خب شبه‌کلاس‌ها با یک دونقطه نوشته میشن
ولی شبه‌المان‌ها با دو تا دونقطه هستن
و به این ترتیب راحت می‌تونیم
شبه‌کلاس‌ها رو از شبه‌المان‌ها تشخیص بدیم
خب حالا بیایید اون اولین حرف رو استایل بدیم
مثلاً بگیم font-style دیگه italic نباشه بلکه normal باشه
و بیایید بگیم font-style دیگه italic نباشه بلکه normal باشه
و همین‌طور یک margin هم بدیم
در سمت راست به اندازه ۵ پیکسل
و این هم از این
می‌بینید؟
حالا یک فاصله داریم و متن دیگه ایتالیک نیست
عالیه
و البته این کار برای هر heading دیگه‌ای هم
و برای هر حرف دیگه‌ای جواب میده
پس طبیعتاً فقط برای ایموجی‌ها نیست
بیایید بگیم می‌خوایم اولین حرف h2
خیلی بزرگ‌تر باشه
مثلاً font-size رو بزاریم ۶۰ پیکسل
یا برای بیشتر مشخص شدن حتی ۸۰ پیکسل
و این هم از این
پس در اصل ما این pseudo-element رو انتخاب کردیم
که دوباره میگم در HTML واقعاً وجود نداره
ولی انگار یک المان واقعی هست که می‌تونیم انتخاب کنیم
و بعد همین‌جا استایل بدیم
خب ولی این یکی خیلی جالب نیست
پس حذفش کنیم
و یکی دیگه امتحان کنیم که first-line هست
مثلاً بیایید همه‌ی پاراگراف‌ها رو انتخاب کنیم
و بعد داخل اون‌ها اولین خط رو انتخاب و استایل بدیم
مثلاً می‌خوایم رنگش
قرمز باشه فقط برای تست
و می‌بینید که به خوبی کار کرد
این یک پاراگرافه و این هم اولین خطشه
پس قرمز شده همین‌طور اینجا و اینجا
و اینجا و اینجا همه‌جا همینطوره
درسته؟
حالا بذارید یک انتخابگر جدید دیگه نشونتون بدم
که هنوز نمی‌دونید
که انتخابگر المان مجاور (adjacent element selector) هست
یا انتخابگر خواهر/برادر مجاور
خب یک المان sibling (خواهر/برادر) در واقع
المانیه که داخل یک والد مشترک قرار داره
برای مثال این تگ p خواهر همین یکیه
و همین‌طور این یکی و اون یکی و همه‌ی بقیه
چون همه‌شون داخل یک container هستن
که در اینجا این article هست
حالا sibling مجاور یعنی همون المانی که
دقیقاً بعدی قرار گرفته
مثلاً sibling مجاور این h3
این پاراگرافه درسته؟
پس در اصل المان مجاور یعنی
المانی که درست بعدش میاد
و برای این یک انتخابگر وجود داره
کاری که می‌خوام بکنم اینه که فقط
پاراگراف‌هایی رو انتخاب کنم که بعد از h3 میان
که میشه این یکی و این یکی درسته؟
پس می‌نویسیم h3 و بعد یک علامت +
این + همون انتخابگر sibling مجاور هست
و حالا اگه ذخیره کنیم می‌بینید که
فقط پاراگراف‌هایی که دقیقاً بعد از h3 هستن
مثل این یکی و این یکی انتخاب شدن
و بعد داخل اون‌ها فقط اولین خط
انتخاب و استایل داده شده
درسته؟
ولی بیایید اینو خاموش کنیم
چندان کاربردی نیست
ولی هنوز می‌خوام مرجعش رو بهتون بدم
برای first-line و شاید حتی مهم‌تر
برای انتخابگر sibling مجاور
که در بعضی مواقع واقعاً خیلی مهمه
خب؟
ولی حالا بیایید بریم سراغ پرکاربردترین و
مهم‌ترین pseudo-element
که pseudo-element های before و after هستن
پس pseudo-element بعد (after) یک شبه‌عنصر ایجاد می‌کند
که به صورت خودکار اولین فرزند
عنصر انتخاب‌شده خواهد بود
و مطمئنم که این کمی عجیب به نظر می‌رسد
اما در واقع می‌تواند خیلی کاربردی باشد
برای برخی استایل‌های ظاهری کوچک که
نمی‌خواهیم برای آن‌ها یک عنصر جدید در HTML اضافه کنیم
پس بگذارید منظورم را نشان بدهم
و راحت‌ترین راه برای نشان دادن آن استفاده از دمو است
پس چیزی که دارم درباره‌اش صحبت می‌کنم این چیز کوچک زرد اینجاست
بیایید کمی فضای بیشتر بدهیم تا بتوانیم واقعاً آن را ببینیم
پس در اصل دارم این استایل ظاهری کوچک را اینجا اضافه می‌کنم
که به سادگی می‌گوید این یک مقاله برتر است
درسته؟
و بنابراین برای این چیز خیلی کوچک
لازم نیست یک عنصر جدید کامل به HTML اضافه کنیم
البته می‌توانستیم این کار را انجام دهیم
اما این یک نمونه‌ی خوب برای استفاده از
pseudo-element های before یا after است
خیلی خب بگذارید برگردانیم و دوباره به اینجا بیاییم
و یادتان باشد که این عنصر اینجا
نزدیک این h1 قرار دارد
پس کاری که می‌کنیم این است که
یک pseudo-element بعد (after) درست بعد از h1 ایجاد کنیم
پس من کدی می‌نویسم
و بعد فهمیدنش ساده‌تر می‌شود
پس دوتا کولون (:) و بعد after
و حالا اولین ویژگی که الزامیه
اینجا مشخص کنیم ویژگی content است
پس content را تعریف می‌کنیم و اینجا
باید چیزی بنویسیم
و حتی می‌تواند یک رشته‌ی خالی باشد
مثل همین متن خالی به این شکل
اما در این مورد ما می‌خواهیم "top" باشد باشه؟
ولی حتی اگر هیچ متنی در pseudo-element نخواهید
باز هم باید ویژگی content را تعریف کنید
و در واقع در این نقطه
این pseudo-element باید همین حالا در صفحه‌ی ما دیده شود
پس بیایید امتحانش کنیم
و به نظر می‌رسد هنوز آنجا نیست
اما بیایید همینجا بررسی کنیم
اوه در واقع اینجاست
می‌بینید که اینجا در h1 هست
پس ما در واقع می‌خواهیم در h2 باشد
و حالا اینجاست
پس این عنصری است که همین الان ایجاد کردیم
و کمی بعد آن را استایل می‌دهیم چون در این حالت
خیلی معنی‌دار نیست
اما می‌توانید حتی در DevTools هم آن را ببینید
و وقتی روی آن هاور کنید درست همانجاست باشه؟
ولی حالا بیایید کمی بیشتر استایلش کنیم
بیایید یک رنگ پس‌زمینه به آن بدهیم
من از یک زرد خوش‌رنگ با این کد ffe70e استفاده می‌کنم
خیلی خب
و حالا این بیشتر شبیه یک عنصر واقعی به نظر می‌رسد
بعد می‌توانیم سایز فونت را هم تغییر دهیم
مثلاً می‌توانیم آن را بولد کنیم
خب بیایید ببینیم
و همین حالا هم کمی زیباتر به نظر می‌رسد
و حالا کمی padding به آن بدهیم
به طور پیش‌فرض هر pseudo-element
در واقع یک عنصر inline است
و بنابراین اگر بخواهیم padding بدهیم
می‌خواهیم box model به طور عادی روی آن اعمال شود درسته؟
و برای انجام این کار
باید این عنصر را به صورت inline-block رندر کنیم
پس display: Inline-block
و این در واقع یکی از
موارد عالی استفاده از inline-block است
پس شاید بد نباشد یادداشت کنید
حالا کمی padding اضافه کنیم
مثلاً پنج پیکسل بالا و ده پیکسل در طرفین
عالیه
پس همین حالا هم خیلی خوب به نظر می‌رسد
اما حالا باید آخرین بخش پازل را اضافه کنیم
که این است که آن را در یک جای معنادار قرار دهیم
پس دقت کنید که اینجا عنصر
تقریباً در انتهای عنصر قرار دارد یعنی در انتها
و نیمی از آن بیرون است
پس اینجا در مثالمان بیایید
به h2 مان موقتاً یک رنگ پس‌زمینه بدهیم
تا ببینیم چه اتفاقی می‌افتد
پس رنگ پس‌زمینه نارنجی باشه؟
و حالا جایی که می‌خواهیم pseudo-element باشد
اینجاست کمی بیرون
پس اول بگذارید آن را در این گوشه قرار بدهیم
و بعد از آن به بیرون منتقلش کنیم
خب فکر می‌کنید چطور می‌توانیم این کار را انجام دهیم؟
خب جوابش موقعیت‌دهی مطلق (absolute positioning) است
خیلی خب؟
پس اولین کاری که باید انجام بدهیم
برای اینکه یک عنصر را به صورت مطلق جایگذاری کنیم
این است که اول به عنصر والد
که می‌خواهیم جایگذاری داخل آن انجام شود
ویژگی position: Relative بدهیم یادتان باشد
و در این مورد
این همان عنصر h2 خواهد بود
پس position: Relative
و حالا آماده‌ایم این عنصر را به صورت مطلق جایگذاری کنیم
پس position: Absolute و آن را در بالا قرار بدهیم
و فقط برای تست فعلاً بذاریمش سمت چپ
پس این میشه گوشه‌ی بالا سمت چپ
و واقعاً هم عالی کار کرد
دقیقاً همین‌جاست
فقط دقت کن چه اتفاقی افتاد
اگر اینجا توی h2 خاصیت position: Relative رو خاموش کنیم
این فوراً میره بالا اینجا
در بالاترین نقطه‌ی صفحه درسته؟
و به همین دلیله که نباید position: Relative رو
روی المنت والد فراموش کنیم همون جایی که
می‌خوایم این اتفاق بیفته
ولی حالا می‌خوایمش اینجا در سمت راست
یعنی درست اینجا
و حالا بیاییم یه مقدار ببریمش بیرون
پس ببریمش بالا و یه مقدار هم به راست باشه؟
و دلیل اینکه دارم این کارو می‌کنم اینه که
می‌خوام یه چیزی رو نشونت بدم که
هنوز در موردش حرف نزدیم و اون «طول منفی» هست
پس اگه اینجا بگیم ۲۵ پیکسل از راست
از این سمت راست حرکت می‌کنه
به این طرف یعنی به سمت چپ درسته؟
یعنی ۲۵ پیکسل از سمت راست به این طرف
اما اگه مقدار منفی بذاریم
به سمت مخالف حرکت می‌کنه
و حالا دیگه اینجاست
یعنی بیرون از h1 خب حداقل بخشی از اون درسته؟
البته نه h1 بلکه h2 دقیق‌ترش
بعد در بالا هم همین کار رو انجام بدیم
بذاریم منفی ۱۰ پیکسل
و فکر کنم می‌تونه حتی کمی بیشتر باشه
بذاریم منفی ۱۵
خب اینطوری یکم بهتر به نظر میاد باشه؟
و حالا می‌تونیم این یکی رو اینجا حذف کنیم
و تمام
پس این دقیقاً شبیه همون یکی شد درسته؟
خب کمی فرق داره
این یکی یه مقدار بالاتره
پس می‌تونیم دوباره بیاریمش پایین بذاریم ۱۰
و همچنین رنگش مشکیه پس اینجا هم همین کارو کنیم
و برای هماهنگی از کد هگزادسیمال استفاده کنیم
برای مشکی کردنش هم صفر صفر
و صفر تا آخر
و حالا ببینیم خب این دقیقاً همونه
فقط تنها تفاوت اینه که اون ۴۴۴ هست
ولی واقعاً مهم نیست
و دوباره این المانی که ساختیم
و استایل دادیم واقعاً اینجا وجود داره
توی ساختار HTML که در DevTools می‌بینیم
ولی خب در HTML خودمون
هیچ‌جایی نزدیک این h2 پیدا نمیشه درسته؟
پس CSS وقتی اینجا تعریفش کنیم
خودش به صورت خودکار اون رو می‌سازه
و می‌ذارتش اینجا تا بتونیم استایل بدیم
پس این استایل‌ها طبیعتاً
اینجا توی پنل Styles ظاهر می‌شن
و اینم مقادیر معمول مدل جعبه‌ای (Box Model)
خب
و این هم روشی برای کار با شبه‌المان‌ها (pseudo-elements) در HTML
حالا pseudo-element دیگه‌ای هم هست به اسم before
ولی در عمل دقیقاً همین شکلیه
تفاوتش اینه که
after عملاً آخرین فرزند المنت انتخاب‌شده میشه
در حالی که before میشه اولین فرزند المنت
یعنی قبل از هر چیزی داخل اون قرار می‌گیره
پس اگه اینو به before تغییر بدیم
می‌بینی که اینجا جاش عوض میشه
ولی چون داریم این المنت رو
به صورت absolute position می‌دیم اصلاً مهم نیست
که نتیجه چه شکلی به نظر میاد
چون در هر صورت این pseudo-element
به شکل absolute position هست و فرقی نداره
که از after استفاده کنیم یا before
عالیه
پس با این کار این بخش از مبانی CSS رو
به طور کامل تموم کردیم
آفرین بهت و کارت خیلی عالیه که هنوز با من همراهی
حتی با اینکه محتوا داره یکم پیچیده‌تر میشه
و شاید کمی سخت‌تر برای درک
ولی خب این جزئی از مسیر یادگیریه
فقط مطمئن شو که واقعاً
همه‌چیز رو که اینجا نشونت دادم درک کردی
با تمرین کردن و همینطور
مرور کدی که توی هر جلسه نوشتی
خب دو جلسه‌ی بعدی در مورد
یه سری مهارت‌های توسعه‌دهنده‌ست که برایت مهمه
وقتی سفر به‌عنوان توسعه‌دهنده‌ی وب رو شروع می‌کنی
و بعد از اون یه
چالش کدنویسی نهایی داریم برای این بخش
تا بتونی چیزی که همین الان یاد گرفتیم
رو توی این چند ویدیوی اخیر تمرین کنی
پس ویدیوهای بعدی خیلی مهم هستن
و فکر کنم خیلی هم هیجان‌انگیزن
پس به زودی می‌بینمت اونجا