جلسه ۵۳ – شبه عناصر در 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

پایان ترم

[box type=”info” class=”question-from-users” width=””]

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

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

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

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

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

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

[/box]

نتیجه گیری

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

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

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

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

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

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

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

4 نظر

4 پاسخ

  1. چرا div2::after ؟
    مگر در متن نگفتید که به فرزندان اضافه می شود و در مثالها after و before رو برای پدر نوشتید (p) نه فرزند
    طبق این گفته باید اینگونه نوشت:
    parent::after.

    1. سلام سهیل. بله بله درسته، و طبق چیزی که گفتی کاملا کار میکنه.
      منتهی کدی که مهدی نوشته از یک طریق دیگه داره کار میکنه. اما چطوری؟ div دوم، div2 رو به عنوان والد خودش میبینه، اما چون قبل از خودش هیچ فرزند دیگه ای داخل div2 نیست، زیر div2 قرار میگیره. برای همین مهدی از یک margin-left استفاده کرده که بتونه نمایانش کنه 🙂

  2. جواب این قسمت واقعا دو شب وقت گرفت با اینکه خیلی راحت بود

    .div2{
    background: lightgreen;
    width:100px;
    height:100px;
    }
    .div2::after{
    content:””;
    background: indianred ;
    width:100px;
    height:100px;
    margin-left: 105px;
    display: inline-block;
    }

    1. مرسی مهدی کاملا درسته 🙂 خسته نباشی. یادگیری مفاهیم before و after یه مقدار وقت گیره ولی بعد از یاد گرفتن خیلی ساده تر میشه

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

نشانی ایمیل شما منتشر نخواهد شد.

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=