درگاه واسط طراحی وب سایت
مشاهده نمونه کارها

اطـلاعیــه

برخی از مطالب سایت به خاطر فعل و انفعالاتی حذف گردیده اند. اکثر قالب های رزبلاگی به دلیل وجود مشکلات بالایی که در امر ترجمه ما وجود داشت از دسترس خارج شده اند و پیشنهاد میشود تا اطلاع ثانوی قالب های حذف شده از سایت را تعویض نمایید. زیرا به زودی فایل های آنها از سرور نیز حذف خواهند گشت. به زودی قالب هایی برای رزبلاگ با امکانات و کدنویسی قوی تر قرار خواهد گرفت.
از صبر شما در رابطه با سرعت لود ضعیف وبسایت عذرخواهی میکنیم. به زودی بر روی سرور های قدرتمندتری انتقال داده میشویم.

معرفی کلاس های کاذب ساختاری (۱)


این مطلب در تاریخ ۳۱ فروردین ۱۳۹۴ در دسته "آموزش < آموزش CSS" فرستاده شده است.
(87 مطلب ارسالی)

توی زندگیم در رقابت با کسی نیستم، هدف من شکست موفقیت قبلیمه...


پوریا
معرفی کلاس های کاذب ساختاری
معرفی کلاس های کاذب ساختاری (۱)Reviewed by پوریا امجدزاده on Apr 20Rating: 4.0معرفی کلاس های کاذب ساختاریمقاله آموزش و معرفی کلاس های کاذب ساختاری در CSS3 به همراه مثال های زنده

سلام، در آغاز ماه دوم از اولین فصل سال ۹۴ هستیم. امیدوارم که روز های خوشی را تا الان سپری کرده باشید.
در این مقاله قصد داریم کلاس های ساختاری کاذب در CSS3 را به شما معرفی کنیم و مطمئنا تمام شما به نحوی با آنها سرکار داشته ایید تا به حال که شاید خیلی از شما نمیدونستید که چی هستند.

CSS3 به ما اجازه میدهد که عناصر را بر اساس جایگاهشان در صفحه، انتخاب کنیم. این گزینشگر ها را به عنوان کلاس های کاذب ساختاری (Structural Pseudo Classes) شناخته میشوند. شاید فکر کنید کمی پیچیده و مبهم هست ولی زمانی که شیوه اعمال کردن آنها را یاد گرفتید همه چیز ساده خواهد شد.

قبل از اینکه بپردازیم به آموزش باید دو نکته را مدنظر داشته باشیم که اول گزینشگر های کلاس های کاذب توسط IE9 و نسخه های بالاتر پیشتیبانی میشند و در نسخه های قدیمی تر خیر و دوم اینکه پیش نیاز این مقاله آشنایی با مفاهیم CSS هست.

معرفی کلاس های کاذب ساختاری:

:root

این کلاس، عنصر ریشه هست (همیشه برچسب html را انتخاب میکند).

:nth-child(n)

در اینجا ما n اُمین فرزند از والدش را انتخاب میکنیم. به عنوان مثال:

“ul li:nth-child(3) {color:red}”

در قطعه کد بالا، عنصر سومین فرزند عنصر li از والدش ul به رنگ قرمز در خواهد آمد.

:nth-last-child(n)

این گزینشگر، آخرین عنصر از والدش را انتخاب میکند و تغییراتی که تمایل داریم را روش اجرا مینماید.

:nth-of-type(n)

این گزینشگر n اُمین عنصر از نوع مشخص شده را انتخاب میکند (والد این عناصر باید یکسان باشد). در این عنصر میتونید از شماره ها استفاده کنید و یا اینکه زوج و فرد را مشخص کنید.

برای زوج و فرد کافیه که به جای n از عبارت های odd و یا even استفاده کنید.

:nth-last-of-type(n)

این گزینشگر همانند گزینشگر nth-last-child عمل میکند با این تفاوت که شمارش را از آخرین عنصر شروع میکند.

***********

تا همینجا برای این مقاله کافیست. امیدوارم که استفاده لازم را از این قطعه کد ها ببرید. منتظر بخش دوم از این مقاله باشید.

ShortLink:   http://naz-skin.ir/?p=1808