خانه / مقالات اموزشی / css / animation در css
آموزش CSS
آموزش CSS

animation در css

آموزش CSS (فصل دوازدهم – جلسه اول) : سایر گزینشگرها در CSS

گزینشکرها (selectors)

در این جلسه از آموزش css با سایر گزینشگرهایی که در Css3 معرفی شده اند صحبت خواهیم کرد.
اگر دومین پست از آموزش css را خوانده اید، با هم درمورد گزینشکرها صحبت کردیم
گفتیم که در css شش نوع گزینشگر برای انتخاب المنتها وجود دارد که یگی از ان ها کلاس های کاذب (pseudo-class) بودند، که این سلکتورها برای نمایش رویدادهای صفحه از جمله، کلیک، هاور، فوکوس و … استفاده می شوند. در css کلاس های کاذب دیگری نیز وجود دارد که مربوط به طریقه انتخاب فرزندان (child) یک المنت پدراست. ما میخواهیم در این جلسه در مورد آن ها توضیح دهیم.

کلاس های کاذب توارثی

کد html زیر را در نظر بگیرید

 

حال اگر بخواهیم به هر یک از این گزینه ها یک رنگ متفاوت اختصاص دهیم، چه میکردیم؟ حتما برای هر یک class تعریف می کردیم و رنگ مورد نظر را انتخاب می کردیم. خب این روش درست است اما اگر ندانیم class آن چیست چطور؟ اگر سایت داینامیک باشد، و این اطلاعات بعدا اضافه شود به طوریکه نمیتوان برای آن ها class تعریف کرد؟؟ در این صورت باید از کلاس های کاذب توارثی استفاده کنیم.
کلاس های کاذب توارثی موجود در css به ترتیب این ها هستند :
nth-child(n)
nth-last-child(n)
first-child
last-child
حال به تعریف دقیقتر این کلاس های کاذب می پردازیم :

nth-child(n) و nth-last-child(n)

nth-child(n) : با استفاده از این کلاس کاذب می توان برای تک تک المنت های یک صفحه وب، بدون استفاده از id یا class برای آن ها یک استایل متفاوت تعیین کنیم.
حرف n در داخل پرانتز یک عدد طبیعی است ۱,۲,۳,…
این عدد تعیین کننده چندمین فرزند از یک المنت پدر است
به طور مثال اولین تگ شماری ۱ را دارد دومین شماره ۲ و…
به کد css زیر دقت کنید تا متوجه شوید چگونه میتوانیم به هر یک از li های کد html بالا استایل متفاوت دهیم.

 

البته در مروگر ie فقط از نسخه ۹+ کار میکند.
اگر کد را اجرا کنید نتیجه ای شبیه زیر خواهید داشت.
1x1.trans آموزش CSS (فصل دوازدهم   جلسه اول) : سایر گزینشگرها در CSS
کلاس کاذب nth-last-child(n) برعکس nth-child(n) عمل میکند، به این صورت که از اخر به شمارش المنت ها میپرداز.
اگر nth-last-child را جایگزین nth-child در کد css بالا کنیم نتیجه کد به شکل زیر خواهد بود.
1x1.trans آموزش CSS (فصل دوازدهم   جلسه اول) : سایر گزینشگرها در CSS

first-child و last-child

همانطور که از اسم کلاس ها معلومه first-child اولین فرزند از یک المنت پدر last-child آخرین فرزند از یک المنت پدر رو انتخاب میکنند.
کد css زیر را به کدهای css بالا اضافه کنید

 

نتیجه
1x1.trans آموزش CSS (فصل دوازدهم   جلسه اول) : سایر گزینشگرها در CSS

دیگر کلاس های کاذب

selection : این کلاس کاذب استایل المنت را هنگامی که ان را انتخاب میکنیم، (در حالی که کلیک چپ رو نگه داشتیم روی المنت میکشیم یا CTRL + A ( در حالت پیشفرض مرورگرها
هنگامی که به طور مثال متنی رو انتخاب میکنیم، رنگ متن سفید، و پس زمینه ان آبی میشود. ما توانیم با استفاده از این کلاس کاذب این رنگ را هر کدام از المنتها تغییر دهیم یا ان را برای کل صفحه تعیین کنیم.
کد css :

 

المنت های کاذب (pseudo-elemnt)

بعلاوه کلاس های کاذبی که گفتیم، المنت های کاذب نیز وجود دارند.
::first-letter تغییر استایل اولین کاراکتر از یک متن.
کد html :

کد css :

 

1x1.trans آموزش CSS (فصل دوازدهم   جلسه اول) : سایر گزینشگرها در CSS

::first-line تغییر استایل اولین خط از یک متن.

کد css :

بسیار خب آموزش این جلسه نیز به پایان رسید در جلسه بعدی به معرفی گزینشگرهای صفت (attribute) و باقی گزینشگرها میپردازیم.

درباره آموزشگاه نوین آی تی

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

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

پاسخ دهید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net