شبه عناصر در CSS چه کاربردی دارند ؟

می توان با استفاده از شبه عناصر درCSSبخش های مختلف یک المان را سبک دهی کرد (styleدلخواه را به آن اعمال کرد) .
در این بخش از آموزش طراحی سایت به آموزش شبه عناصر درCSS می پردازیم.
از شبه عنصر های برای انجام کارهایی همچون :

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

ترکیب نحوی (syntax)

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

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

به دوتا دو نقطه که در مثال فوق بکار برده شده دقت کنید - ::first-line در مقابل :first-line
سیستم حاشیه نویسی (notation) دو تا کاراکتر :: جایگزین یک دو نقطه در CSS گردید . این در واقع تلاشی بود از سوی کنسرسیوم وب جهان W3C که به منظور ایجاد وجه تمایز بینpseudo-classes (شبه کلاس ها) و pseudo-elements (شبه عناصر) صورت گرفت .
ترکیب نحوی تک دو نقطه ی در ویرایش های قدیمی تر CSS2 و CSS1 برای شبه کلاس ها و شبه عناصر بکار می رفت .
برای ایجاد سازگاری با ورژن های قبلی (سازگاری عقبرو backward compatability)، دستور نحوی تک دونقطه ی را می توان برای CSS2 و CSS1 بکار برد .

شبه المان ::first-line

شبه المان ::first-line غالباً به منظور افزودن یا اعمال سبک (Style) خاص به اولین خط یک متن بکار می رود .
شبه المان ::first-line را تنها می توان به المان های block اعمال کرد .
خط اول نوشته یا متن را در کلیه ی المان های

قالب دهی (فرمت) کنید :

        p::first-line {
            color: #ff0000;
            font-variant: small-caps;
        }

خصوصیت های زیر به شبه المان ::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 به منظور اعمال سبک یا style خاصی به اولین خط یک نوشته بکار می رود .
شبه المان ::first-letter را تنها می توان به المان های block اعمال کرد .
تمامی حروف اول نوشته را در المان های

قالب دهی کنید :

        p::first-letter {
            color: #ff0000;
            font-size: xx-large;
        }

تمامی خوصیت های ذیل به شبه المان ::first-letter اعمال می شوند :

• font properties
• color properties
• background properties
• margin properties (میزان حاشیه ی دور عناصر را تنظیم می کند)
• padding properties (خصوصیت هایی که حاشیه ی درونی عنصر را تنظیم می کند)
• border properties(خصوصیت مربوط به تنظیم خطوط حاشیه)
• text-decoration
• vertical-align ( داشته باشد"none"مقدار "float" فقط در صورتی که )
• text-transform
• line-height
• float (شناور سازی عنصر به چپ یا راست)
• clear

شبه کلاس ها و کلاس های CSS

می توان شبه المان ها را با کلاس های CSS ترکیب کرد :

        p.intro::first-letter {
            color: #ff0000;
            font-size: 200%;
        }

مثال فوق اولین حروف پاراگراف ها را با class="intro"، به رنگ قرمز و با اندازه ی بزرگتر نمایش می دهد .

ترکیب چندین شبه عنصر (Multiple pseudo-element)

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

        p::first-letter {
            color: #ff0000;
            font-size: xx-large;
        }

        p::first-line {
            color: #0000ff;
            font-variant: small-caps;
        }

CSS – شبه المان ::before

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

یک تصویر را درج می کند :

نمونه پنج

        h1::before {
            content: url(smiley.gif);
        }

امتحان کنید

CSS – شبه عنصر ::after

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

درج می کند :

نمونه شش

        h1::after {
            content: url(smiley.gif);
        }

امتحان کنید

شبه عنصر ::selection و کاربرد آن در CSS

شبه المان ::selection با آن بخشی از یک عنصر مطابقت دارد که توسط کاربر انتخاب شده باشد (این شبه عنصر در واقع به آن بخشی از سند که توسط کاربر با مکان نمای موس رنگی و انتخاب شده قوانین اعمال می کند) .
خصوصیت های CSS که در زیر آورده شده را می توان به ::selection اعمال کرد :

color، background، cursor و outline

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

       ::selection {
            color: red;
            background: yellow;
        }

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