آموزش شبه کلاس ها در CSS به زبان ساده
یک انتخابگر شبه کلاس در CSS عناصر را بر اساس یک شرط اضافی مطابقت می دهد و لزوما با درخت سند تعریف نمی شود.
شبه کلاس چیست؟
شبه کلاس ها در CSS به شما امکان می دهند تا حالت های پویای عنصر مانند شناور، حالت فعال، تمرکز و … را مانند عناصر موجود در درخت سند سبک دهی کنید. برای مثال، عناصر فرزند اول یا آخر را مورد هدف قرار می دهد.
شبه کلاس با دونقطه (:) شروع می شود. ساختار آن به صورت زیر تعریف می شود:
selector:pseudo-class { property: value; }
در بخش زیر رایج ترین شبه کلاس ها توضیح داده می شوند.
شبه کلاس لنگر
با استفاده از شبه کلاس لنگر، لینک ها به روش های مختلف قابل نمایش هستند:
این شبه کلاس ها این امکان را فراهم می کنند تا لینک های مشاهده نشده را متفاوت از لینک های مشاهده بازدید شده سبک دهی کنید. متداول ترین روش سبک دهی، حذف خط از زیر متن لینک های بازدید شده است.
مثال
a:link {
color: blue;
}
a:visited {
text-decoration: none;
}
برخی از شبه کلاس های لنگر پویا هستند – آنها در نتیجه تعامل کاربر با سند مانند شناور، تمرکز و … اعمال می شوند.
مثال
a:hover {
color: red;
}
a:active {
color: gray;
}
a:focus {
color: yellow;
}
شبه کلاس های زیر، نحوه نمایش لینک ها را در واکنش به اقدامات کاربر تغییر می دهند.
- :hover هنگامی اعمال می شود که کاربر مکان نما را روی عنصر قرار می دهد اما آن را انتخاب نمی کند.
- :active هنگامی اعمال می شود.که عنصر فعال یا کلیک شده باشد.
- :focus هنگامی اعمال می شود که فوکوس یا تمرکز صفحه کلید روی عنصر باشد.
توجه: برای اینکه این شبه کلاس ها به خوبی کار کنند، باید آنها را با ترتیب درست تعریف کنید:
:link, :visited, :hover, :active, :focus.
شبه کلاس :first-child
شبه کلاس :first-child با عنصری مطابقت دارد که اولین عنصر فرزند عنصر دیگری است. انتخاب گر ol li:first-child در مثال زیر اولین آیتم از لیست مرتب را انتخاب می کند و حاشیه بالای آن را از حذف می کند.
مثال
ol li:first-child {
border-top: none;
}
توجه: برای اینکه شبه کلاس :first-child در اینترنت اکسپلور ۸ و نسخه های قبل از آن کار کند، باید <DOCTYPE!> در بالای سند اعلان شود.
شبه کلاس :last-child
شبه کلاس :last-child با عنصری مطابقت دارد که آخرین عنصر فرزند عنصر دیگری است. انتخاب گر ul li:last-child در مثال زیر آخرین آیتم لیست را از لیست نامرتب انتخاب کرده و حاشیه سمت راست آن را حذف می کند.
مثال
ul li:last-child {
border-right: none;
}
توجه: انتخاب گر:last-child در CSS در اینترنت اکسپلور۸ و نسخه های قبل از آن کار نمی کند. از IE9 به بعد پشتیبانی می شود.
شبه کلاس :nth-child
CSS3، شبه کلاس جدید :nth-child را معرفی می کند که اجازه می دهد تا یک یا چند فرزند خاص یک عنصر والد خاص را انتخاب کنید. ساختار اصلی این انتخاب گر را می توان به صورت (nth-child (N: نوشت. در آن N یک آرگومان یا ورودی است که می تواند یک عدد باشد یا یک کلمه کلیدی (even یا odd)، یا عبارتی از فرم xn + y که در آن x و y عدد صحیح هستند (به عنوان مثال ۱n، ۲n، ۲n +1، …).
مثال
table tr:nth-child(2n) td {
background: #eee;
}
قواعد سبک در مثال بالا به سادگی ردیف های جدول را به صورت متناوب برجسته می کند، بدون اینکه هیچ شناسه یا کلاسی را به عنصر <table> اضافه کنید.
نکته: انتحاب گر :(nth-child (N در CSS در مواقعی که مجبور به انتخاب عناصری در داخل درخت سند هستید که در یک بازه یا الگوی خاص، مثلا در مکان های زوج یا فرد قرار می گیرند، بسیار مفید است.
شبه کلاس :lang
شبه کلاس :lang اجازه می دهد تا بر اساس تنظیمات زبان برای تگ های خاص، انتخاب گر بسازید. در مثال زیر، شبه کلاس :lang علامت های نقل قول را برای عناصر <q> تعریف می کند که به طور صریح مقدار ویژگی زبان آن ها no است.
مثال
q:lang(no) {
quotes: “~” “~”;
}
/ * قطعه کد HTML * /
<p>Some text <q lang=”no”>A quote in a paragraph</q> Some text.</p>
توجه: اینترنت اکسپلور تا نسخه ۷ از شبه کلاس :lang پشتیبانی نمی کند. IE8 هم فقط در صورت اعلان <DOCTYPE!> پشتیبانی می کند.
شبه کلاس ها و کلاس های CSS
شبه کلاس ها را می توان با کلاس های CSS ترکیب کرد.
در مثال زیر، لینک در کلاس class=”red”، با رنگ قرمز نمایش داده می شود.
مثال
a.red:link }
color: #ff0000;
}
/ * قطعه کد HTML * /
<a class=”red” href=”#”>Click me</a>
