آموزش pseudo-class در CSS | آموزش کامل + نمونه کد

ویژگی pseudo-class در CSS

ویژگی pseudo-class در CSS برای تعیین حالت مشخصی از یک متن لینک شده بوسیله تغییر رنگ آن در حالات مختلف استفاده میشود:

حالت پیش فرض متن (a:link)
لینک بازدید شده (a:visited)
نگه داشتن نشانگر موس روی متن (a:hover)
انتخاب کردن متن (a:hover)

 selector:pseudo-class {
  property: value;
}

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: blue;
}

/* visited link */
a:visited {
  color: darkorchid;
}

/* mouse over link */
a:hover {
  color: red;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">این یک متن لینک شده است</a></b></p>
</body>
</html>

نکته: دستور a:hover باید بعد از a:link و a:visited قرار بگیرد و a:hover در آخر.

ترکیب pseudo-class و html

میتوان با استفاده از کد های html حالت های دیگری هم به متن لینک شده داد.

<!DOCTYPE html>
<html>
<head>
<style>

a.highlight:hover {
  color: green;
  font-size: 28px;
} 
</style>
</head>
<body>

<p>نشانگر موس را روی متن زیر ببرید</p>

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

</body>
</html>

pseudo-class در تگ division

می‌توان از pseudo-class در تگ <div> هم استفاده کرد:

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

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

<p>نشانگر موس را روی دکمه زیر ببرید:</p>

<div>division</div>

</body>
</html>

ترفند زیر برای ظاهر کردن یک متن با تگ <div> بکار می‌رود:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: rgb(52, 72, 243);
  padding: 25px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body>

<div>نشانگر موس را روی این متن نگهدارید
  <p>Division</p>
</div>

</body>
</html>

تعیین اولین زیر مجموعه‌ی pseudo-class

با دستور :first-child در تگ <style> می‌توان اولین زیر مجموعه یک تگ را مشخص کرد.

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

<p>این یک متن است</p>
<p>این یک متن است</p>

<div>
  <p>این یک متن است</p>
  <p>این یک متن است</p>
</div>

</body>
</html>

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

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

<p>این یک <i>متن</i> است. این یک <i>متن</i> است.</p>
<p>این یک <i>متن</i> است. این یک <i>متن</i> است.</p>

</body>
</html>

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

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

<p>این یک <i> متن </i> است</p>
<p>این یک <i> متن </i> است</p>

<div>
  <p>این یک <i> متن </i> است</p>
  <p>این یک <i> متن </i> است</p>
</div>

</body>
</html>

دستور lang در pseudo-class

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

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

<p>متن<q lang="no">یک نقل قول در بند</q> متن</p>

</body>
</html>

توسعه دهندگان

احسان اسلامی