آموزش کلاس های شبه CSS

12 جولای 2021

کلاسهای شبه چیست؟

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

به عنوان مثال ، می توان از آن استفاده کرد:

  • وقتی کاربر بر روی آن عنصر می زند ، یک عنصر را سبک کنید
  • سبک به طور متفاوتی از پیوندها بازدید و بازدید نکرده است
  • وقتی عنصری تمرکز می شود ، آن را سبک کنید


نحو

نحو کلاسهای شبه:

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> بر روی من حرکت کنید.

مثال

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>

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.