شبه عناصر (Pseudo-element) در CSS

شبه عنصر (pseudo-element)

شبه عناصر یا pseudo-element ها در زبان CSS برای استایل دهی به بخش خاصی از یک عنصر استفاده می شوند. به طور مثال:

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

ساختار کلی شبه عنصرها به این شکل است:

selector::pseudo-element {
  property:value;
}

در این ساختار باید حواستان به دو علامت دو نقطه (::) باشد. در CSS3 که جدیدترین نسخه ی CSS است باید از دو عدد (یک جفت) دو نقطه پشت سر هم استفاده کنید. کنسرسیوم جهانی وب این کار را انجام داد تا بتواند بین شبه کلاس ها و شبه عناصر تفاوت واضحی بگذارد. در واقع در نسخه های قبلی CSS (مانند CSS2 و CSS1) هم برای شبه عناصر و هم برای شبه کلاس ها از یک علامت دو نقطه استفاده می شد (:) اما دیگر این چنین نیست.

شبه عنصر first-line::

شبه عنصر first-line:: برای استایل دهی به خط اول یک عنصر مورد استفاده قرار می گیرد. کد زیر خط اول تمام عناصر <p> را هدف میگیرد:

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

سوال: خط اول یعنی چه؟

پاسخ: خط اول با اینتر (line break) و ... مشخص نمی شود بلکه واقعا از نظر ظاهری هر کلمه ای که در خط اول قرار بگیرد هدف خواهد بود. بنابراین این ویژگی واکنش گرا است چرا که اگر قسمت خروجی را کوچک کنید می بینید که با تغییر اندازه ی خط اول و تعداد کلماتش، باز هم خط اول قرمز می ماند.

نکته: این ویژگی تنها روی عناصر Block کار می کند.

شبه عنصر first-line:: می تواند خصوصیات زیر را بگیرد:

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

شبه عنصر first-letter

شبه عنصر first-letter:: برای استایل دهی به حرف اول از یک متن به کار می رود. در مثال زیر می خواهیم اولین حرف از تمام عناصر <p> را استایل دهی کنیم:

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
</style>
</head>
<body>

<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: شبه عنصر first-letter:: تنها روی عناصر block اثر می گذارد.

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

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
("vertical-align (only if "float" is "none
text-transform
line-height
float
clear

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

شما می توانید چندین شبه عنصر را ترکیب کنید. در مثال زیر اولین حرف پاراگراف قرمز شده و اندازه ی فونت xx-large را میگیرد، ادامه ی خط آبی شده و فونت small-caps میگیرد. بقیه ی پاراگراف نیز اندازه ی فونت و رنگ پیش فرض خودش را خواهد داشت:

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>

</body>
</html>

مشاهده ی خروجی در JSBin

شبه عنصر before::

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

در مثال زیر، قبل از محتوای هر <h1> یک تصویر اضافه خواهد شد:

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
  content: url(https://www.w3schools.com/css/smiley.gif);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>

<h1>This is a heading</h1>
<p dir='rtl'><b>هشدار:</b> اگر می خواهید این ویژگی در Internet Explorer 8 و قبل تر کار کند باید DOCTYPE! را مشخص کرده باشید.</p>


</body>
</html>

مشاهده ی خروجی در JSBin

شبه عنصر after::

از شبه عنصر after:: برای ایجاد محتوا بعد از محتوای اصلی یک عنصر استفاده می شود. در مثال زیر، بعد از محتوای هر <h1> یک تصویر اضافه خواهد شد:

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
  content: url(https://www.w3schools.com/css/smiley.gif);
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an element.</p>

<h1>This is a heading</h1>
<p dir='rtl'><b>هشدار:</b> اگر می خواهید این ویژگی در Internet Explorer 8 و قبل تر کار کند باید DOCTYPE! را مشخص کرده باشید.</p>


</body>
</html>

مشاهده ی خروجی در JSBin

شبه عنصر selection::

شبه عنصر selection:: قسمتی از عنصر است که توسط کاربر select یا انتخاب می شود. این شبه عنصر با خصوصیات color و background و cursor و outline در زبان CSS ترکیب می شود.

به طور مثال در کد زیر، اگر کاربر متنی را انتخاب کند آن متن قرمز می شود و پس زمینه اش نیز به زرد تغییر رنگ می دهد:

<!DOCTYPE html>
<html>
<head>
<style>
::-moz-selection { /* Code for Firefox */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}
</style>
</head>
<body>

<h1>Select some text on this page:</h1>

<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
    
<p dir='rtl'><b>هشدار:</b>این ویژگی در Internet Explorer 8 و نسخه های قبل تر آن کار نمی کند.</p>
    
<p dir='rtl'><b>هشدار:</b>مرورگر Firefox  یک دستور دیگر برای انجام این کار دارد و آن دستور moz-selection-:: است.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

هشدار: این ویژگی در Internet Explorer 8 و نسخه های قبل تر آن کار نمی کند. همچنین مرورگر Firefox دستور خاص خودش را برای انجام این کار دارد و آن دستور moz-selection-:: است.

شبه عناصر دیگر

شبه عناصر دیگر CSS از این قرار اند:

::after (:after) ::backdrop ::before (:before) ::cue (:cue) ::first-letter (:first-letter) ::first-line (:first-line) ::grammar-error ::marker ::placeholder ::selection ::slotted() ::spelling-error

از آنجایی که این شبه عناصر زیاد هستند، توضیح تک تک آن ها مقدور نیست. در صورت تمایل به مطالعه و آشنایی بیشتر با آن ها میتوانید به صفحه ی توسعه دهندگان Mozilla مراجعه کنید. امیدوارم از این قسمت لذت برده باشید.