9
تشکر

شبه کلاس ها (Pseudo-Classes) در CSS3

شبه کلاس ها - Pseudo Classes

شبه کلاس ها – Pseudo Classes

Pseudo-Classes یا شبه کلاس ها برای انتخاب عناصر بدون دادن کلاس, آیدی یا خاصیت اضافی به آنها استفاده میشوند. در این مطلب تعدادی از آنها را آموزش میدهیم و در مطالب بعدی کامل خواهیم کرد.

Nth-Child:

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

<div class="wp4">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
p:nth-child(2){
  color: red;
}

در کد استایل بالا ابتدا دومین عنصر p درون همه تگ ها را انتخاب کردیم سپس رنگ آن را به قرمز عوض کردیم.

دو: کلمات کلیدی odd به معنی فردها و even به معنی زوج ها. توسط این دو کلمه کلیدی میتوانیم تمام عناصر زوج یا فرد یک تگ را انتخاب کنیم.

سه: معادله. معادله هایی مانند (an, an+b, an-b, …). برای مثال با نوشتن معادله 4n عناصر درون یک تگ والد هر چهار بار یکی انتخاب میشود. خروجی میشود عناصر شماره 4, 8, 12, 16, … و غیره. اگر معادله 4n+3 را بنویسید هر چهار با یک عنصر انتخاب میشود. و در عناصری که خودشان دارای عناصر داخلی هستند سومین عنصرشان انتخاب میشود. برای تست این شبه کلاس به اینجا مراجعه کنید.

:Nth-Last-Child

این شبه کلاس دقیقا مانند nth-child عمل میکند اما محاسبات را از انتها انجام میدهد.

:Only-Child

توسط این شبه کلاس میتوانیم تگ هایی را انتخاب کنیم که تنها فرزند تگ والدشان هستند. برای مثال در کد زیر ما p هایی را انتخاب میکنیم که تنها فرزند div هستند یعنی تگ div فرزند دیگری نداشته باشد.

div p:only-child{
  color: red;
}

:Only-Of-Type

این شبه کلاس مانند Only-Child است ولی در Only-Of-Type اگر از عناصر دیگر به غیر از عنصر انتخابی هم باشد باز هم عنصر مورد نظر ما انتخاب میشود. مثال:

<div class="wp4">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</div>
div p:only-of-type{
  color: red;
}

در کد بالا باز هم عنصر p انتخاب میشود زیرا از نوع p دیگر درون div وجود ندارد. در حالی که در Only-Child اینطور نیست.

:Empty

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

<div class="wp4">
  <p></p>
</div>
div p{
  width: 50px;
  height: 50px;
  display: block;
}
div p:empty{
  background: #ccc;
}

حتی اگر درون تگ p یک فاصله هم وجود داشته باشد انتخاب نمیشود.

:Target

target برای استایل دادن به یک عنصر با ID مشخص استفاده میشود. برای مثال ما ابتدا یک تگ a که مقدار href آن برابر #mytarget است میگذاریم سپس یک تگ p میگذاریم و ID آن را برابر mytarget قرار میدهیم. حال با استفاده از شبه کلاس target یک استایل به p میدهیم. اما این استایل به p اعمال نمیشود تا زمانی که بر روی تگ a کلیک شود.

<a href="#target">Click Me!</a>
<div>
  <p id="target">
    <strong>Paragraph 1:</strong>
    Sweet icing applicake. Apple pie applicake bonbon cake danish cookie jujubes.
  </p>
</div>
p:target {
  padding: 15px;
  background-color: #333;
  color: #fff;
}

توسط این شبه کلاس حتی میتوانید یک اسلاید شو با CSS و بدون جاوا اسکریپت بسازید.

:Enabled and : Disablde

توسط این شبه کلاس میتوان عناصری (مخصوصا عناصر فرم) که قابلیت disable شدن را دارند انتخاب میکند. شبه کلاس Disablde عناصری که Disablde هستند و شبه کلاس Enabled عناصری که Enabled هستند را انتخاب میکنند. مثال:

<input type="text" />
<input type="text" disabled />
input:disabled{
  background: #ccc;
}
input:enabled{
  background: #222;
}

:Checked

توسط این شبه کلاس میتوان عناصری که قابلیت Check شدن را دارا میباشند همچنین در وضعیت Check هستند را انتخاب کرد. مثال:

<input type="checkbox" checked="" />
input:checked{
  opacity: 0.5;
}

شبه کلاس ها در CSS3 کاربرد خیلی زیادی دارند و از آنها در بسیاری از طراحی های جدید استفاده میشود.

  • حمیدرضا حیدری می‌گه:

    سلام و خدا قوت آقا محسن گل
    واقعا سایتتون تکه من که از زبان انگلیسی زیاد سردر نمیارم فقط توی وب فارسی دنبال آموزش طراحی سایتم و یکی از سایتهایی که مطالبش تکراری و بازنویسی شده سایتهای دیگه نیست سایت شماست اجرکم عندالله…


  • نظرات این مطلب بسته است.