آموزش CSSآموزش طراحی سایت

جلسه ۵۳ – شبه عناصر در CSS

شبه عناصر یا Pseudo elements

منظور از شبه عناصر چیست؟ تفاوت شبه عناصر با شبه کلاس ها در چیست؟ چگونه یک شبه عناصر در CSS بسازیم؟ در این مقاله قصد داریم تا به صورت کامل در رابطه با شبه عناصر صحبت کنیم.

همونطور که توی مقدمه گفته شد، شبه عناصر به جای تاثیر گذاری روی ارتباط عناصر پدر و عناصر فرزند، مستقیما روی محتوای هر عنصری می‌تونن تاثیر گذار باشن.

ساختار نوشتاری شبه عناصر

نحوه نوشتن یا به اصطلاحی، سینتکس شبه عناصر، شبیه به شبه کلاس هاست، با این تفاوت که به جای یک “دو نقطه”، از دو “دو نقطه” استفاده می‌کنیم. در ادامه با مثال هایی این مقاله آموزش طراحی سایت را کاملتر می‌کنیم.

برای درک بهتر، به شکل زیر دقت کنین:

سینتکس شبه عنصر

همونطور که مشاهده می‌کنیم، تو این فصل به جای مفهوم “شبه کلاس”، “شبه عنصر” رو نوشتیم و تغییر جزئی ای توی تعداد “دو نقطه ها” ایجاد کردیم.

مقدار، خاصیت و انتخابگر هم که انشاالله بلدین!

انواع شبه عنصر ها

شبه عنصر ها تعداد زیادی دارن که بررسی همه اون ها بیشتر از حدود این مقالست. اما در حالت کلی، مهم ترین شبه عنصر ها به انواع زیر تقسیم می‌شن که هرکدوم کاربرد خودشون رو دارن:

  • first-line
  • first-letter
  • after
  • before
  • selection

شبه عنصر first-line

وظیفه‌ی این شبه عنصر، اینه که اولین خط از یک محتوای عنصر رو انتخاب کنه.

به این وسیله، ما می‌تونیم تغییرات مدنظرمون رو، بدون اینکه از عنصر اضافه ای استفاده کنیم انجام بدیم.

این کاربرد رو تو مثال زیر با هم بررسی می‌کنیم:

<div>
Hi! my name is Navid and I teach CSS in mizfa.com!
you can put your comments about my articles right below this page!
</div>

سپس کد CSS زیر رو می‌نویسیم:

div{
   width:300px;
   height:300px;
   font-size: 30px;
   font-family: sans-serif;
}
div::first-line{
   color:green;
   text-shadow: 1px 1px 2px green;
}

نتیجه کد رو می‌تونیم به فرم زیر مشاهده کنیم:

شبه عنصر first-line

دو نکته در مورد این شبه عنصر، حائز اهمیته:

نکته: این شبه عنصر فقط رو عناصری عمل می‌کنه که دارای ویژگی display:block یا display:inline-block هستن. پس اگه خواستین رو عنصری مثل span این شبه عنصر رو پیاده کنین، حتما نحوه نمایشش رو به block یا inline-block تغییر بدین.

نکته: زمانی که خط اول محتوای یه عنصر رو انتخاب کردین، هر خاصیتی رو بهش نمی‌تونین بدین! فقط  خاصیت های زیر قابل قبول هستن:

  • خاصیت های مربوط به فونت
  • خاصیت های مربوط به رنگ
  • خاصیت های مربوط به تصاویر پیش زمینه
  • word-spacing
  • line-height
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • clear

نا گفته نمونه که این شبه عنصر، در CSS1 و CSS2 از یک “دو نقطه” استفاده می‌کرد. اما از CSS3، دو “دو نقطه” نحوه نوشتارش تغییر کرد.

شبه عنصر first-letter

همونطور که از اسمش پیداس، وظیفه ی این شبه عنصر، اینه که حرف اول از محتوای عنصر مورد انتخابش رو انتخاب کنه.

به مثال زیر توجه کنین:

<p>
Well the story begins here, the time I was at home,
I just didn't notice how bad the weather was.
So I took out my shirt and started putting it on.
</p>

حالا برای اینکه سایز حرف اول محتوا رو بزرگ تر کنیم، کد CSS زیر رو می‌نویسیم:

p{
   width:300px;
   height:300px;
   font-size: 30px;
   font-family: sans-serif;
   color:orange;
}
p::first-letter{
   font-size: 2em;
}

نتیجه به شکل زیر نمایش داده می‌شه:

شبه عنصر first-letter

شبه عنصر after

توسط این شبه کلاس، می‌تونیم بدون اضافه کردن یا کم کردن عنصری تو کد های HTML،‌ عنصر فرزند جدیدی به عناصر فرزند یک عنصر پدر اضافه کنیم.

به کد HTML زیر توجه کنین:

<p>
Hello 
</p>

یک عنصر p میبینیم که دارای یک فرزنده، و اون هم یک محتوا یا متن سادست.

حالا می‌خوایم بدون اضافه کردن کد دیگه ای به HTML، یک محتوای دیگه یا (یک فرزند دیگه به عنصر p) اضافه کنیم:

p{
   font-size: 30px;
   font-family: sans-serif;
   color:green;
}
p::after{
   content: 'everyone';
}

نتیجه کد به شکل زیر مشاهده می‌شه:

شبه عنصر after

انواع محتوایی که خاصیت content می‌تونه قبول کنه،‌عبارت است از:

  • کلمات و عبارات (stringها که بین دو ” نوشته میشن)
  • عکس ها (توسط دستور ()url فراخونی می‌شن، دقیقا صفت src در تگ img)
  • هیچ (برای ساختن شکل های گوناگون استفاده می‌شه، مثل مربع، مستطیل و …)

شبه عنصر before

این شبه عنصر، دقیقا مثل شبه عنصر after عمل می‌کنه، با این تفاوت که مقدار داده شده به خاصیت content، قبل از عناصر فرزند عنصر پدر مورد نظر قرار می‌گیره.

به مثال زیر توجه کنین:

<p>
everyone
</p>

تو این مثال، با استفاده از شبه عنصر before، روندی برعکس مثال قبل رو طی می‌کنیم. به کد CSS توجه کنین:

p{
   font-size: 30px;
   font-family: sans-serif;
   color:green;
}
p::before{
   content: 'Hello';
}

و نتیجه دقیقا شبیه مثال قبل خواهد بود:

شبه عنصر before

نکته مهم: فرزند ساخته شده توسط content در شبه عنصر های before و after، به صورت پیش فرض دارای ویژگی display:inline‌ خواهد بود. پس اگه خواستیم بهشون طول، عرض و غیره بدیم باید از حالت inline خارجشون کنیم.
در این مورد، می‌تونین در مقاله display در CSS بیشتر اطلاعات کسب کنین.

اگه جایی از مطالب براتون مبهم بود، حتما تو قسمت نظرات بیان کنین تا من یا بقیه اعضای تیم میزفا کمکتون کنیم 🙂

شبه عنصر selection

مسلما دیدین وقتی می‌خوایم یه متن رو کپی کنیم، اول نشانگر رو میاریم روش و از اول تا انتها، انتخابش می‌کنیم.

رنگ پیش زمینه اون متن معمولا آبی می‌شه، درسته؟

حالا اگه بخوایم اون متن به شکل و قیافه ی دیگه ای در بیاد، از شبه عنصر selection استفاده می‌کنیم:

<p>
Now, what I'm going to do, is to select this text to copy it.
</p>

حالا کافیه کد CSS زیر رو بنویسیم:

p{
   font-size: 30px;
   font-family: sans-serif;
}
p::selection{
   color:white;
   background-color: green;
}

و بدین ترتیب، بعد از انتخاب کردن متن،‌ شاهد نتیجه زیر خواهیم بود:

شبه عنصر selection

پایان ترم

سوال:
به کد HTML زیر و نتیجه اون توجه کنین:

<div class="parent">
   <div class="div2"></div>
</div>

کوییز مقاله ۵۳

با استفاده از مفاهیم after و before، کد CSS مورد نیاز رو بنویسین.

نکته: رنگ دو مربع رو lightgreen و indianred در نظر بگیرین. ابعاد اون ها ۱۰۰ در ۱۰۰ پیکسل هست.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

در این مقاله آموزش جامع CSS ، با مفهوم شبه عنصر در CSS آشنا شدیم.

شبه عناصر عبارت بودن از:

  • first-line: برای انتخاب خط اول محتوا
  • first-letter: برای انتخاب حرف اول محتوا
  • before: برای قرار دادن محتوا، قبل از عنصر مورد نظر
  • after: برای قرار دادن محتوا، پس از عنصر مورد نظر
  • selection: برای تغییر استایل

بدین ترتیب در اینجا، فصل شبه عناصر به پایان می‌رسه. امیدوارم براتون مفید و به صرفه بوده باشه 🙂

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌ شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
Share via
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر