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

- visibility ١٨ mode_comment

گزینشکرها (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 در داخل پرانتز یک عدد طبیعی است 1,2,3,... این عدد تعیین کننده چندمین فرزند از یک المنت پدر است به طور مثال اولین تگ شماری 1 را دارد دومین شماره 2 و... به کد css زیر دقت کنید تا متوجه شوید چگونه میتوانیم به هر یک از li های کد html بالا استایل متفاوت دهیم.

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

first-child و last-child

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

نتیجه

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

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

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

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

کد css :

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

کد css :

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

comment دیدگاه کاربران
kiansoft2000

عالی بود

yoosef

سجاد جان واقعا خسته نباشید
از همه بچه های این سایت تشکر میکنم واسه خاطر زحمت هایی که میکشید

ممنون ، بندهه هم از شما و کاربران عزیزی که پیگیر مطالب سایت هستید تشکر می کنم .

صفحه هر چند ثانیه یه بار می پره بالا یا پایین. آدم دیونه می شه برا خوندن مطلب

چنین مشکلی وجود نداره دوست عزیز . مطمئنید ؟

1234567890

با سلام

3 ردیف با 4 عکس دارم ، وقتی که صفحه نمایش browser را کوچیک میکنم در هر ردیف 2 عکس قرار میگیرد . میخواستم بدونم اینو با media درست میکنن ؟ اگه آره ، چطوری میتونم تشخیص بدم که به width , height چه مقداری میتونم بدم ؟

با تشکر از آموزش ها و ایتکه وقتی برای پاسخگویی به ما قرار میدهید .

سید رضا

سلام. خسته نباشید.
لقمان جان ممکنه آموزش طراحی responsive design رو هم قرار بدین؟
ضمنا یه ایمیل از خودت بیزحمت بده چند تا سوال کوتاه ازت دارم میخوام تو میل ازت بپرسم.

لقمان آوند

به زودی یه اموزش طراحی قالب رسپانسیو خواهیم داشت
ایمیلم در صفحه نویسندگان وجود داره

بسیار ممنون

Mohammad Mirzaei

این اموزش واقعا به دردم خورد ممنون

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2