سبد (0)

شبه کلاس ها در CSS

شبه کلاس ها (pseudo-classes)

Wiki

شبه کلاس ها در CSS برای اضافه کردن افکت های خاص، به بعضی از Selectorها استفاده می شود.

در واقع از شبه کلاس ها (pseudo-class) برای تعریف یک حالت خاص از یک عنصر استفاده می شود.

چند مورد از استفاده های شبه کلاس ها:

  • استایل دهی یک عنصر زمانی که موس روی آن قرار می گیرد (hover)
  • تفاوت قائل شدن در ظاهر لینک هایی که مقصد آنها رویت شده و یا نشده است (visited)
  • استایل دهی فیلدهای ورودی، زمانی که مکان نما، برای ورود اطلاعات روی آنها قرار  گرفته است (focus)

نحوه استفاده از شبه کلاس ها

selector:pseudo-class {property:value;}

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

selector.class:pseudo-class {property:value;}

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

Wiki

لینک ها را می توان به روش های مختلفی در مرورگرها نمایش داد:

مثال (شبه کلاس ها در CSS)

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
خودتان امتحان کنید »

توجه: برای تنظیم Styleهای یک لینک، به موارد زیر توجه فرمایید:

  1. a:hover باید بعد از a:link و a:visited آورده شود.
  2. a:active باید بعد از a:hover آورده شود.
  3. نام شبه کلاس، به حروف کوچک و بزرگ حساس است (case-sensitive).

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

Wiki

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

a.red:visited {color:#FF0000;}

<a class="red" href="/css_syntax.asp">CSS Syntax</a>

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

شبه کلاس first-child:

Wiki

شبه کلاس first-child:، اولین فرزند یک عنصر را تطبیق می دهد.

توجه: برای اینکه شبه کلاس first-child: در IE8 و نسخه های قبلتر اجرا شود باید یک <DOCTYPE!> در بالای صفحه HTML اعلان شود.

تطبیق اولین عنصر <p>

Wiki

در مثال زیر گزینشگر، هر تگ <p> که اولین فرزند یک عنصر دیگر باشد را تطبیق می دهد:

مثال (شبه کلاس ها در CSS)

<html>
<head>
<style type="text/css">
p:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
خودتان امتحان کنید »

تطبیق اولین تگ <i>، داخل تمام تگ های <p>

Wiki

در مثال زیر، گزینشگر، اولین تگ <i> را در تمام تگ های <p> تطبیق می دهد:

مثال (شبه کلاس ها در CSS)

<html>
<head>
<style type="text/css">
p > i:first-child
{
color:blue;
}
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
خودتان امتحان کنید »

تطبیق تمام تگ های <i>، داخل اولین تگ <p>

Wiki

در مثال زیر، گزینشگر، تمام تگ های <i> داخل تگ <p> که اولین فرزند یک عنصر دیگر است را تطبیق می دهد:

مثال (شبه کلاس ها در CSS)

<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue;
}
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
خودتان امتحان کنید »

شبه کلاس lang:

Wiki

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

توجه: برای اینکه شبه کلاس lang: در IE8 و نسخه های قبلتر اجرا شود باید یک <DOCTYPE!> در بالای صفحه HTML اعلان شود.

در مثال زیر، شبه کلاس lang: برای تمام تگ های <p> با "lang="no یک علامت نقل قول تعریف می کند:

مثال (شبه کلاس ها در CSS)

<html>
<head>
<style type="text/css">
q:lang(no) {quotes: "~" "~";}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
خودتان امتحان کنید »
مثال

مثال - خودتان امتحان کنید

Wiki

اضافه کردن styleهای مختلف، روی لینک ها
این مثال نشان می دهد که چگونه styleهای مختلفی را به لینک ها اضافه کنیم.

استفاده از شبه کلاس focus:
این مثال نشان می دهد که چگونه از شبه کلاس focus: استفاده کنیم.

کلیه شبه کلاس ها و شبه عناصر در CSS

Wiki

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

گزینشگرمثالتوضیحات مثالCSS
:link a:link

تمام لینک هایی که از آن بازدید نشده است را انتخاب می کند.

 1
:visited a:visited

.تمام لینک هایی که بازدید شده است را انتخاب می کند

 1
:active a:active

.لینک های فعال را انتخاب می کند

 1
:hover a:hover

لینک هایی را که موس روی آن حرکت می کند را انتخاب می کند.

 1
:focus input:focus

تمام عناصر ورودی که فوکوس شده اند را انتخاب می کند.

 2
:first-child p:first-child

تمام عناصر <p> که اولین فرزند پدرشان هستند (فرزند ارشد پدرشان) را انتخاب می کند.

 2
:lang(language) p:lang(it)

تمام عناصر <p> را انتخاب می کند که خصوصیت lang آن با "it" (ایتالیایی) تنظیم شده است.

 2
:first-of-type p:first-of-type

تمام عناصر <p> را که اولین عنصر <p> پدرشان باشند را انتخاب می کند.

توجه فرمایید که p:first-child باید p اولین فرزند پدرش باشد.

 3
:last-of-type p:last-of-type

تمام عناصر <p> که آخرین عنصر <p> پدرشان هستند را انتخاب می کند.

 3
:only-of-type p:only-of-type

تمام عناصر <p> که تنها عنصر <p> پدرشان هستند را انتخاب می کند.

 3
:only-child p:only-child

تمام عناصر <p> که تنها فرزند پدرشان هستند را انتخاب می کند. (تک فرزند.)

 3
:nth-child(n) p:nth-child(2)

تمام عناصر <p> که دومین فرزند پدرشان هستند را انتخاب می کند.

 3
:nth-last-child(n) p:nth-last-child(2)

تمام عناصر <p> که از آخر، دومین فرزند پدرشان هستند را انتخاب می کند.

 3
:nth-of-type(n) p:nth-of-type(2)

تمام عناصر <p> که دومین فرزند پدرشان هستند را انتخاب می کند.

 3
:nth-last-of-type(n) p:nth-last-of-type(2)

تمام عناصر <p> که از آخر، دومین فرزند پدرشان هستند را انتخاب می کند.

 3
:last-child p:last-child

تمام عناصر <p> که آخرین فرزند پدرشان هستند را انتخاب می کند.

 3
:root :root

عنصر root سند را بر می گرداند.

 3
:empty p:empty

تمام عناصر <p> که فرزند ندارند، را انتخاب می کند.

 3
:target #news:target

تمام عناصر news# فعال جاری را بر می گرداند.

 3
:enabled input:enabled

تمام عناصر <input> را انتخاب می کند که enabled هستند.

 3
:disabled input:disabled

تمام عناصر <input> که disabled هستند را انتخاب می کند.

 3
:checked input:checked

تمام عناصر <input> که checked هستند را انتخاب می کند.

 3
:not(selector) :not(p)

تمام عناصر را به جز عناصر <p> انتخاب می کند.

 3

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

گزینشگرمثالتوضیحات مثالCSS
:first-letter p:first-letter

اولین حرف از هر تگ <p> را انتخاب می کند.

 1
:first-line p:first-line

اولین خط هر عنصر <p> را انتخاب می کند.

 1
:before p:before

محتوایی دلخواه را قبل از محتوای تمام عناصر <p> درج می کند.

 2
:after p:after

محتوایی دلخواه را بعد از هر عنصر <p> درج می کند.

 2
::selection ::selection

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

 3
نوشته شده توسط امیر پهلوان صادق
بازدید: 34710

آموزش صوتی CSS

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

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