12
تشکر

شبه عناصر (Pseudo Element) در CSS3

CSS

CSS

در مطلب شبه کلاس ها در CSS3 به تعدادی از شبه کلاس ها اشاره کردیم. اما در این مطلب به معرفی برخی از شبه عناصر در CSS3 اشاره میکنیم. تفاوت این دو گروه از اسم آنها مشخص است. برای مثال عکس زیر یک دسته بندی مختصر از این دو گروه است. اما تمام آنها ذکر نشده است.

Syntax

Syntax

در CSS2.1 شبه عناصر با یک دو نقطه مانند شبه کلاس ها انتخاب میشدند. اما در CSS3 شبه عناصر با دو دو نقطه انتخاب میشوند. اما به دلیل اینکه در تمام مروگرها کار کند ما از همان یک دو نقطه استفاده میکنیم. اما همان طور که میبینید به دلیل اینکه شبه عنصر selection در CSS3 معرفی شده فقط با دو نقطه نوشته میشود.

در ادامه مطلب به معرفی چند تا از شبه عناصر می پردازیم.

first-letter

توسط این شبه عنصر میتوانیم حرف اول یک نوشته را انتخاب کنیم. برای مثال میخواهیم حرف اول موجود در تمام تگ های p را با رنگ آبی و فونت بزرگتر نمایش دهیم. برای اینکار مانند زیر عمل میکنیم:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
p:first-letter{
  color: #1f788f;
  font-size: 27px;
}

first-line

همانطور که احتمالا حدس زده اید این شبه عنصر خط اول یک نوشته را انتخاب میکند. تشخیص خط اول در مروگر به صورت خودکار انجام میشود.

p:first-line{
  color: #1f788f;
  font-size: 27px;
}

before and after

این دو شبه عنصر امروزه در دنیای وب طرفدار بسیار زیادی دارد. در واقع هر تگ دارای دو تگ داخل بوالقوه به نام های after و before است. مثلا میتوانیم به صورت زیر شبیه سازی کنیم:

<div>
  <div class="after"></div>
  <div class="before"></div>
</div>

اما در واقع شبه عناصر after و before نمایش داده نمیشوند. برای مثال ما میخواهیم برای لینک های درون وب سایت که به خارج لینک میشوند (External Link) یک تصویر نمایانگر این لینک قرار دهیم. مانند سایت معروف ویکی پدیا.

برای اینجام اینکار به صورت عادی و نه با استفاده از شبه عناصر after و before باید به صورت زیر عمل کنیم:

<a class="ext2" href="http://ext">External Link</a><span><img src="ext.png" /></span>
after-and-before

after-and-before

به این صورت یک صورت عکس مورد نظر کنار لینک نمایش داده میشود. اما همانطور که میبینید احتیاج است پس از هر تگ a دو تگ دیگر نیز نمایش داده شود. اینکار را با استفاده از شبه عناصر after و before نیز میتوانیم انجام دهیم.

.ext:after{
  content:'';
  height: 16px;
  width: 16px;
  display: inline-block;
  background: url(ext.png);
}

به این صورت فقط کافی است که کلاس ext را به لینک ها اضافه کنیم. نکات مورد توجه در استفاده از after و before استفاده از content است. تا وقتی که این خصوصیت را مقدار دهی نکنید این شبه عناصر نمایش داده نمیشوند. در صورتی که مقدار content را خالی بگذارید باید مقدار display را بر اساس نیاز خود نیز مقدار دهی کنید.

استفاده از شبه عناصر after و before گسترش فراوانی پیدا کرده است. یکی از آنها در استفاده از آیکون فونت ها است. نمونه های دیگر را میتوانید در دو تصویر زیر ببینید:

Pseudo Element

Pseudo Element

Pseudo Element

Pseudo Element

selection

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

::selection{
  color: #fff;
  background: #E67551;
}

مطالب مرتبط:

شبه کلاس ها (Pseudo-Classes) در CSS3

 

 

  • tormahiri می‌گه:

    ممنون محسن جان.واقعاً عالی بود

  • علی می‌گه:

    ممنون محسن جان.واقعاً عالی بود


  • نظرات این مطلب بسته است.