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

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۰۸ خرداد ۱۳۹۲

فهرست محتوای این مقاله

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

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

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

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

<ul>
<li>Lang
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</li>

<li>CMS
<ul>
<li>Wordpress</li>
<li>Joomla</li>
<li>Drupal</li>
</ul>
</li>
</ul>

حال اگر بخواهیم به هر یک از این گزینه‌ها یک رنگ متفاوت اختصاص دهیم، چه میکردیم؟ حتما برای هر یک 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 بالا استایل متفاوت دهیم.

ul li {
color: blue;
font: 24px tahoma;
text-shadow: -1px 1px 1px #333;
}

ul li:nth-child(1){color: red;}
ul li:nth-child(2){color: green;}
ul li:nth-child(1) li:nth-child(1){color: orange;}
ul li:nth-child(1) li:nth-child(2){color: brown;}
ul li:nth-child(1) li:nth-child(3){color: pink;}
ul li:nth-child(2) li:nth-child(1){color: gray;}
ul li:nth-child(2) li:nth-child(2){color: silver;}
ul li:nth-child(2) li:nth-child(3){color: yellow;}

البته در مروگر 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 بالا اضافه کنید

ul li:first-child li {font-size: 18px;}
ul li:last-child li {font-size: 14;}

نتیجه

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

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

::selection {
background: #999;
color: #edb;
}

::-moz-selection {
background: #999;
color: #edb;
}

::-webkit-selection {
background: #999;
color: #edb;
}

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

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

<p>7learn: javascript and web design tutarials</p>

کد css :

p {font-size: 20px;}
p::first-letter {font-size: 36px;}

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

<p>7learn: javascript and web design tutarials<br>7learn: javascript and web design tutarials</p>

کد css :

p {font-size: 20px;}
p::first-line {font-size: 36px;}

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

MAHYAR

سلام
ممنون بابت مطالب مفیدتون / بنده یک سوالی داشتم .

میخواستم بدونم آیا ممکن هست که روی یک div که داخلش لینک قرار گرفته اکشنی برای کلیک کردن بنویسیم ؟

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

اگر ج بله هست باید ب چصورت این کارو انجـام داد ؟ / بنده از selection استفاده کردم متاسفانه جوابی نگرفتم ../

سجاد دریس

سلام.
بله میشه.
باید از کلاس کاذب active استفاده کنید به طور مثال

div:active {background: red;}
MAHYAR

ممنون ❓

aghp81

سلام . یه سوال دارم . وقتی کد css و html رو با هم ادغام می کنم و تو یکی از برگه های وردپرس کپی می کنم کار نمی کنه . این در حالیه که اون کد در حالت عادی وقتی با دریم ویور پریویو می کنم کار می کنه و با موس که روی عکس هاور می کنم جواب میده . علتش چیه ؟
چیکار کنم که این مشکل حل شه ؟

سجاد دریس

توی کدهاتون یک فایل خارجی رو به صفحه متصل کردین؟

چشم به راه

سلام
با تشکر از ارسال مطالب سایت به ایمیل من
مسئله ای که منو درگیر کرده اینه که نمیدونم ترتیب و سیر آموزش این مطالب چه طوریه ؟یعنی اول باید کدوم مطالبو یادبگیرم ؟ کدوم مطالب آموزشی پیش زمینه برای یادگیری بقیه مطالبه.لطفاکمکم کنید. 😥

لقمان آوند

Html
Css
Javascript
Pgp

mohammad

ممنون. یه سوال داشتم ..ساخت سایت فلش نیمه داینامیک چطوریه؟ با چه اپلیکیشن هایی ممنون میشم جواب بدید

سجاد دریس

در انجمن مطرح کنید

حسن

ایوووووووووووووول دمت گرم خیلی وقته منتظر بودم! تا شروع بشه طراحی قالب حرف نداریییییییی

safiran

من فکر میکردم این سلکتور ها فقط برای جی کوئری هست، واقعا که این css3 کار رو خیلی آسون کرده… فوق العاده بود آقا سجاد. ممنون

حسن

عالیه!
خسته نباشی !
فقط یه سوال به گفته خودتون ! 15 فصله یعنی بعد سه فصل دیگه تمومه !
بعدش چه آموزش رو شروع میکنید !

سجاد دریس

سلام.
ممنون.
بعدش آموزش طراحی قالب رو شروع میکنم.

علیرضا اسمعیل زاد

من فکر میکردم میخواستین j querry رو آموزش بدین
🙁 🙁

سجاد دریس

آموزش jquery در لیست برنامه های سایت هست، اما زمانش هنوز معلوم نیست.

علیرضا اسمعیل زاد

بهتره آموزش های برنامه نویسی دسکتاپو هم به برنامه هاتون اضافه کنید.مردیم از بس hello world..! چاپ کردیم.

سجاد دریس

اینجا فقط زبان های تحت وب، آموزش داده میشه.

هادی

سلام
ممنون آقا سجاد.

نیاز به لاگین

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