پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: حامد محمدی 
شبه کلاس ها pseudo-class برای تعریف یک حالت خاص برای عنصر استفاده می شوند.
به عبارت دیگر pseudo-class ها عبارات کلیدی هستند که برای تعیین کردن یک حالت خاص، برای عنصر انتخاب شده، به انتخابگرها اضافه می شوند.
در آموزش امروز قصد داریم نحوه کار با شبه کلاس ها pseudo-class را با هم مرور کنم.
همراه ما باشید.
با سلام خدمت همراهان گرامی سایت پرنیان
شبه کلاس ها pseudo-class برای تعریف یک حالت خاص برای عنصر استفاده می شوند.
به عبارت دیگر pseudo-class ها عبارات کلیدی هستند که برای تعیین کردن یک حالت خاص، برای عنصر انتخاب شده، به انتخابگرها اضافه می شوند.
در ادامه مباحث css امروز قصد داریم نحوه کار با شبه کلاس ها pseudo-class را با هم مرور کنم.
شبه کلاس ها pseudo-class چیست؟
همانطور که در بالا گفته شد شبه کلاس ها pseudo-class عبارات کلیدی هستند که به انتخابگرها اضافه می شوند.
شبه کلاس ها pseudo-class میتوانند حالات خاصی را برای عنصر تعیین شده ایجاد کنند.
نمونه هایی از حالاتی که میتوان با استفاده شبه کلاس ها pseudo-class ایجاد کرد به شرح زیر است:
- استایل دهی به یک عنصر برای زمانی که ماوس از روی آن رد می شود ( کلیک نمی شود!)
- استایل دهی به لینک ها زمانی که روی آنها کلیک شده و یا نشده است (مانند لینک های مرور شده در جستجوهای گوگل!)
- استایل دهی به عنصر وقتی روی آن فوکوس (تمرکز) می شود.
شکل نحوی کد نویسی برای شبه کلاس ها
شکل کدنویسی برای شبه کلاس ها نیاز به کمی دقت دارد.
به عبارت دیگر با کدنویسی برای موارد دیگر کمی متفاوت است.
در مثال زیر شکل کلی کار با این ویژگی را می بینید:
[php]
selector:pseudo-class {
property:value;
}
[/php]
استفاده از شبه کلاس ها برای استایل دهی به لینک ها
لینک ها با استفاده از شبه کلاس ها ، میتوانند به شکل های مختلفی استایل دهی شوند.
در مثالی که در ادامه می آید، شما چهار استایل برای حالت های مختلف یک لینک را مشاهده می کنید.
این چهار استایل عبارتند از زمانی که :
1- هنوز روی لینک کلیک نشده است
2- قبلا روی لینک کلیک شده است
3- ماوس از روی لینک رد می شود
4- لینک انتخاب شده است
کد نویسی برای این حالات به شکل زیر است:
[php]
/* 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;
}
[/php]
توجه داشته باشید که:
برای اینکه بتوانید به راحتی متوجه تغییر حالات لینک شوید باید ترتیب زیر را رعایت کنید:
1- a:hover باید بعد از a:link وa:visited بیاید. تا بتواند موثر واقع شود.
2- a:active باید بعد از a:hover بیاید تا در css موثر واقع شود.
3- نام های شبه کلاس ها ، حساس به مورد نیستند.
شبه کلاس ها و کلاس های css
شبه کلاس ها میتوانند با کلاس های css ترکیب شوند.
در کد زیر شما نمونه ای از این ترکیب را روی یک لینک می بینید.
این کد به این صورت عمل می کند که هنگامی که ماوس از روی لینک رد می شود، لینک تغییر رنگ می دهد:
[php]
a.highlight:hover {
color: #ff0000;
}
[/php]
تعیین hover روی عنصر <div>
hover به معنای این است که عنصر بتواند با رد شدن ماوس از روی آن و بدون اینکه کلیکی صورت بگیرد تغییر ظاهر بدهد.
مثال زیر نشان دهنده این وضعیت به همراه کد نویسی است:
[php]
div:hover {
background-color: blue;
}
[/php]
نتیجه را ببینید.
ساخت یک ابزار راهنمای ساده!
برای نمونه، این کد ، یک hover در اطراف عنصر <div> ایجاد میکند که وقتی ماوس روی ان می رود، یک عنصر <p> را نمایش می دهد.
[php]
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
[/php]
شبه کلاس اولین فرزند
شبه کلاس اولین فرزند، با یک عنصر مشخص شده، که اولین فرزند عنصر دیگر باشد، مطابقت خواهد داشت.
مثال: تطابق اولین عنصر <p>
در این مثال، انتخابگر با هر عنصر <p> که اولین فرزند عناصر اشد، تطبیق پیدا میکند.
[php]
p:first-child {
color: blue;
}
[/php]
نتیجه را ببنید.
تطبیق دادن اولین عنصر <i> در تمام عناصر <p>!
در مثال زیر ، انتخابگر تمام عناصر <I> را که در عنصر <P> قراردارند انتخاب میکند و با کدنوشته مطابقت و تغییر شکل می دهد.
[php]
p i:first-child {
color: blue;
}
[/php]
نتیجه را ببینید.
تطبیق تمام عناصر <i> در تمام عناصر<p> که فرزند اول هستند
در مثال زیر، انتخابگر، تمام عناصر <I> که در عناصر <p> هستند و <p>ها فرزند اول یک عنصر دیگر هستند، را انتخا میکند. ودر نهایت آنها را با کد نوشته شده مطابقت و تغییر شکل می هد.
[php]
p:first-child i {
color: blue;
}
[/php]
شبه کلاس long
شبه کلاس ling به شما اجازه میدهد قوانین خاصی را برای زبان های مختلف تعریف کنید.
در مثال زیر ، long علامت کوتیشن “” را برای عناصر <p> با lang=”no” تعریف میکند.
نمونه کد :
[php]
q:lang(no) {
quotes: “~” “~”;
}
Some text A quote in a paragraph
Some text.
[/php]
