شبه کلاس ها (Pseudo-class) در CSS

Pseudo-class یا شبه کلاس

شبه کلاس ها برای تعریف وضعیت خاصی از یک عنصر استفاده می شوند به طور مثال:

زمانی که موس روی دکمه ای می رود، آن دکه استایل جدیدی بگیرد
استایل لینک های بازدید شده (قبلا توسط کاربر کلیک شده اند) و لینک های بازدید نشده تفاوت داشته باشند
یک عنصر زمانی استایل بگیرد که در حالت focus (روی آن کلیک شده و فعال) باشد

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

selector:pseudo-class {
  property:value;
}

شبه کلاس Anchor

Anchor ها همان لینک ها هستند (تگ <a>) و شبه کلاس های خاصی دارند:

a:link : لینک هایی که هنوز وارد آن ها نشده اید
a:visited : لینک هایی که حداقل یک بار روی آن ها کلیک کرده ایم
a:hover : زمانی که موس را روی یک لینک می برید
a:active : لحظه ای که روی لینک کلیک می کنید (فشردن کلیک چپ)

به مثال زیر نگاه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
/* لینکی که وارد آن نشده ایم */
a:link {
  color: red;
}

/* لینکی که وارد آن شده ایم */
a:visited {
  color: green;
}

/* آمدن موس روی لینک */
a:hover {
  color: hotpink;
}

/* کلیک کردن روی لینک */
a:active {
  color: blue;
}
</style>
</head>
<body>

<p><b><a href="https://www.roxo.ir/server-response-time/" target="_blank">This is a link to Roxo.ir/plus</a></b></p>

<p dir='rtl'><b>نکته:</b> 
  a:hover باید همیشه بعد از دستورات a:link و a:visited بیاید تا کار کند. در غیر این صورت بی تاثیر خواهد بود
</p>

<p dir='rtl'><b>نکته:</b>
    a:active باید همیشه بعد از دستور a:hover بیاید تا کار کند. در غیر این صورت بی تاثیر خواهد بود

</p>

</body>
</html>

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

در مثال بالا گفته ایم که:

لینکی که وارد آن نشده ایم قرمز خواهد بود
لینکی که وارد آن شده ایم سبز خواهد بود
هنگام آمدن موس روی لینک، لینک صورتی می شود
هنگام کلیک کردن روی لینک، لینک آبی خواهد شد

نکته: a:hover باید همیشه بعد از دستورات a:link و a:visited بیاید تا کار کند. در غیر این صورت بی تاثیر خواهد بود. همچنین a:active باید همیشه بعد از دستور a:hover بیاید تا کار کند. در غیر این صورت عمل نخواهد کرد.

شبه کلاس ها و CSS

همانطور که دیدید، شما می توانید شبه کلاس ها را با دستورات CSS ادغام کنید. به طور مثال:

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
  color: #ff0000;
} 
</style>
</head>
<body>

<p><a class="highlight" href="google.com">Goodle</a></p>
<p><a href="roxo.ir/plus">Roxo</a></p>

</body>
</html>

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

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

به طور مثال در کد زیر از شبه کلاس hover: روی عنصر <div> استفاده کرده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}
</style>
</head>
<body>

<p>Mouse over the div element below to change its background color:</p>

<div>Mouse Over Me</div>

</body>
</html>

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

البته این ها مثال های ساده ای هستند. ما می توانیم تردستی های جالبی با استفاده از شبه کلاس ها انجام بدهیم! به طور مثال به صفحه ی خروجی کد زیر بروید و سعی کنید متوجه نحوه ی کار کد ها بشوید:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body dir='rtl' align='center'>

  <div><strong>موس خودت را روی این نوشته بیاور</Strong>
  <p>من یه باکس نامرئی هستم! از دیدنت خوشحالم!</p>
</div>

</body>
</html>

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

شبه کلاس first-child:

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

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
  color: blue;
} 
</style>
</head>
<body>

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

</body>
</html>

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

در این مثال گفته ایم اولین عنصر  را پیدا کن که اولین فرزند هر عنصری باشد. در واقع تعریف first-child همین است!

البته می توانیم کدها را کمی تغییر دهیم. به طور مثال در کد زیر می خواهیم تمام عناصر را پیدا کنیم که اولین فرزند یک عنصر باشند:

<!DOCTYPE html>
<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>
 
<p dir='rtl'><b>هشدار:</b> اگر می خواهید این ویژگی در Internet Explorer 8 و قبل تر کار کند باید DOCTYPE را مشخص کرده باشید.</p>

</body>
</html>

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

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

یک مثال دیگر می تواند به این شکل باشد که بگوییم تمام عناصر را انتخاب کند که در یک عنصر باشند و آن عنصر اولین فرزند یک عنصر دیگر نیز باشد! به مثال زیر توجه کنید:

<!DOCTYPE html>
<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>

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

</body>
</html>

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

شبه عنصر lang:

شبه عنصر lang: به شما اجازه می دهد که برای زبان های مختلف قوانین مختلفی تعیین کنید. lang: در مثال زیر عناصر <q> را پیدا می کند و سپس اگر "lang="no داشتند برای آن ها علامت خاصی می گذارد:

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>

<p dir='rtl'><b>هشدار:</b> اگر می خواهید این ویژگی (یعنی :lang) در Internet Explorer 8 و قبل تر کار کند باید DOCTYPE! را مشخص کرده باشید.</p>

</body>
</html>

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

شبه کلاس های دیگر

شبه کلاس های بسیار زیادی در زبان CSS وجود دارد. به این شبه کلاس ها نگاه کنید:

:active :any-link :blank :checked :current :default :defined :dir() :disabled :drop :empty :enabled :first :first-child :first-of-type :fullscreen :future :focus :focus-visible :focus-within :has() :host :host() :host-context() :hover :indeterminate :in-range :invalid :is() :lang() :last-child :last-of-type :left :link :local-link :not() :nth-child() :nth-col() :nth-last-child() :nth-last-col() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :past :placeholder-shown :read-only :read-write :required :right :root :scope :target :target-within :user-invalid :valid :visited :where()

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

امیدوارم از این قسمت لذت برده باشید.