کلاسهای شبه چیست؟
از کلاس شبه برای تعریف حالت خاص یک عنصر استفاده می شود.
به عنوان مثال ، می توان از آن استفاده کرد:
- وقتی کاربر بر روی آن عنصر می زند ، یک عنصر را سبک کنید
- سبک به طور متفاوتی از پیوندها بازدید و بازدید نکرده است
- وقتی عنصری تمرکز می شود ، آن را سبک کنید
نحو
نحو کلاسهای شبه:
selector:pseudo-class {
property: value;
}
کلاسهای شبه لنگر
پیوندها را می توان به روش های مختلف نمایش داد:
مثال
/* 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;
}
توجه: برای تأثیرگذار بودن ، a:hoverباید بعد a:linkو بعد از a:visitedتعریف CSS بیایید ! برای اینکه بتوانید م effectiveثر باشید a:activeباید a:hoverدر تعریف CSS بیایید ! نام کلاس شبه به حروف کوچک و بزرگ حساس نیستند.
توجه: برای تأثیرگذار بودن ، a:hoverباید بعد a:linkو بعد از a:visitedتعریف CSS بیایید ! برای اینکه بتوانید م effectiveثر باشید a:activeباید a:hoverدر تعریف CSS بیایید ! نام کلاس شبه به حروف کوچک و بزرگ حساس نیستند.
کلاسهای شبه و کلاسهای CSS
کلاسهای شبه را می توان با کلاسهای CSS ترکیب کرد:
وقتی روی پیوند موجود در مثال کلیک کنید ، رنگ آن تغییر می کند:
مثال
a.highlight:hover {
color: #ff0000;
}
شناور در <div>
نمونه ای از استفاده از :hoverکلاس شبه روی عنصر <div>:
مثال
div:hover {
background-color: blue;
}
نکته ساده شناور
برای نشان دادن عنصر <p> (مانند یک راهنمای ابزار) بر روی عنصر <div> بروید:
مثال
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
CSS – کلاس شبه اول کودک
:first-childشبه کلاس مسابقات یک عنصر مشخص است که کودک برای اولین بار از عنصر دیگر
اولین عنصر <p> را مطابقت دهید
در مثال زیر ، انتخابگر با هر عنصر <p> که فرزند اول هر عنصر است مطابقت دارد:
مثال
p:first-child {
color: blue;
}
اولین عنصر <i> را در همه عناصر <p> مطابقت دهید
در مثال زیر ، انتخابگر با اولین عنصر <i> در تمام عناصر <p> مطابقت دارد:
مثال
p i:first-child {
color: blue;
}
تمام عناصر <i> را در تمام عناصر فرزند اول <p> مطابقت دهید
در مثال زیر ، انتخابگر تمام عناصر <i> موجود در عناصر <p> را که فرزند اول عنصر دیگری هستند مطابقت می دهد:
مثال
p:first-child i {
color: blue;
}
CSS – کلاس: pseudo کلاس
:langشبه کلاس اجازه می دهد تا شما را به تعریف مقررات ویژه ای برای زبان های مختلف.
در مثال زیر ، :langعلامت نقل قول عناصر <q> را با lang = “no” تعریف می کند:
مثال
<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>
</body>
</html>
