%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده (تمدید شد)
سبد (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

دیدگاه‌ها  

+1 # er7an 1396-05-23 14:17
سلام
در صفحه ی اصلی سایتتون قسمت ورود و ثبت نام وقتی با موس رویشان میرویم رنگ عکس با خود متن تغییر میکند
چجوری ممکنه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-05-24 08:21
سلام، توجه داشته باشید که تصویری که در کنار لینک های "ثبت نام" و "ورود" استفاده شده است، در واقع تصویر نیست و از فونت awesome برای نمایش آیکن ها استفاده شده است. بنابراین از خصوصیت color براحتی می توانیم برای تنظیم آیکن ها استفاده کنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mahnaz_67sh 1396-05-01 13:30
در مثال مربوط به first-child وقتی بالای تگ p از تگ های دیگه مثلا span استفاده می کنم، خاصیت first-child کار نمیکنه ولی وقتی تگهای p دقیقا زیر تگ body قرار میگیره کار میکنه
http://beyamooz.com/try_it_yourself/tryit.php?filename=trycss_first-child1
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # mahnaz_67sh 1396-05-02 14:36
جواب این سوال در جواب جناب اقای احسان عباسی گفته شده است. ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # علیرضاباهوش 1395-11-04 09:02
ممنون از مطالبتون.
آیا میتوان با استفاده از شبه کلاس Hover وقتی یک دیوی را هاور میکنیم دیو دیگری که بیرون از آن به لحاظ کد نویسی قرار دارد نمایش داده شود؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
-1 # امیر پهلوان صادق 1395-11-04 10:29
سلام، بله با استفاده از شبه کلاس hover می توان بصورت زیر این کار را انجام داد:
<html>
<head>
<style type="text/css">
div#div02 {
display:none;
}
div#div01:hover + div#div02{
display:block;
}
</style>
</head>

<body>
<div id="div01">div01</div>
<div id="div02">div02</div>
</body>
</html>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # مهدی دلاور 1395-09-15 00:39
سلام و خسته نباشید
من نتونستم فرق بین first-child و first-of-type رو متوجه بشم. به نظرم هر دو یک حالت را انتخاب میکنند. میشه با یه مثال فرقشون رو نشون بدین.
ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1395-09-16 10:02
سلام ممنون.

دستور p:first-child میاد به اولین عنصر در داخل یک والد نگاه می کنه، اگر که این عنصر یک پاراگراف بود، اون رو انتخاب میکنه اما اگه مثلا عنصر h1 بود، اون رو انتخاب نمی کنه.

اما دستور p:first-type-of میاد در بین عناصر درون یک والد، ابتدا عناصر p را پیدا میکنه(در بین دیگر عناصر) و سپس اولین p رو انتخاب میکنه. به مثال زیر مراجعه کنید تا تفاوت رو به روشنی درک کنید:
codepen.io/sbaloot/pen/VmXVbw
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mamad boss 1394-06-30 14:02
با سلام و خسته نباشید
با توجه به تستی که من انجام دادم شبه کلاس های first-letter و first-line فقط برای عناصر block یا عناصری که float شده اند کارمی کند درسته؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # شهربانو دوستی 1394-06-30 20:06
با سلام
بله همینطور است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # الناز عباسی 1394-05-03 11:24
سلام. یه سوال:
before:: به چه معناست؟ و کجا کاربرد داره؟
پیشاپیش ممنون ....
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # احسان عباسی 1394-05-03 12:03
before:: یک شبه عنصر است که به شما امکان می دهد تا با استفاده از css محتوایی را به یک صفحه الحاق کنید.
بدون اینکه نیاز به html داشته باشد. بعنوان مثال به این لینک بروید: codepen.io/sbaloot/pen/jPeaPK
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

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

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

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