شما اینجا هستید

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

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

سینتکس

نحوه دستوری شبه کلاس به صورت زیر است

selector:pseudo-class {
    property:value;
}

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

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

<html>

<head>

<style>

/* unvisited link */

a:link {

    color: #FF0000;

}


/* visited link */

a:visited {

    color: #00FF00;

}


/* mouse over link */

a:hover {

    color: #FF00FF;

}


/* selected link */

a:active {

    color: #0000FF;

}

</style>

</head>

<body>


<p><b><a href="puyapardaz.ir" target="_blank">This is a link</a></b></p>

</body>

</html>

 

توضیح مثال :

a:link : لینک عادی و مشاهده نشده

a:visited : لینکی که کاربر قبلاً دیده است

a: hover : لینکی که موس روی آن قرار دارد

a: active : لینکی که فعال است و کاربر در حال دیدن آن است

توجه داشته باشید که a:hover باید بعد از a:link و a:visited بیاید تا تعاریف CSS روی آن اعمال شوند. و همینطور  a:active باید بعد از a:hover بیاید تا دستورات CSS روی آن اعمال شوند. نامگذاری شبه کلاسها به بزرگ بودن و یا کوچک بودن حروف حساس نمیباشد.

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

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

<html>

<head>

<style>

a.highlight:hover {

    color: #ff0000;

}

</style>

</head>

<body>


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

<p><a href="default.asp">CSS Tutorial</a></p>

</body>

</html>

 

شبه کلاس first-child:

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

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

<html>

<head>

<style>

p:first-child {

    color: blue;

}

</style>

</head>

<body>


<p>This is some text.</p>

<p>This is some text.</p>

</body>

</html>

 

گزینش اولین عنصر <i> در همه عناصر

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

<html>

<head>

<style>

p i:first-child {

    color: blue;

}

</style>

</head>

<body>


<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

</body>

</html>

 

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

 

<html>

<head>

<style>

p:first-child i {

    color: blue;

}

</style>

</head>

<body>


<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>


</body>

</html>

 

دیدگاه‌ها

صفحه‌ها

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.