گزينشکرها

 

 

در اين جلسه از آموزش css با ساير گزينشگرهايي که در Css3 معرفي شده اند صحبت خواهيم کرد.

اگر دومين پست از آموزش css را خوانده ايد، با هم درمورد گزينشکرها صحبت کرديم

 

 

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

1

<ul>

2

 <li>Lang

3

 <ul>

4

 <li>HTML</li>

5

 <li>CSS</li>

6

 <li>Javascript</li>

7

 </ul>

8

 </li>

9

 

10

<li>CMS

11

 <ul>

12

 <li>Wordpress</li>

13

 <li>Joomla</li>

14

 <li>Drupal</li>

15

 </ul>

16

 </li>

17

</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 بالا استايل متفاوت دهيم.

1

ul li {

2

 color: blue;

3

 font: 24px tahoma;

4

 text-shadow: -1px 1px 1px #333;

5

}

6

 

7

ul li:nth-child(1){color: red;}

8

ul li:nth-child(2){color: green;}

9

ul li:nth-child(1) li:nth-child(1){color: orange;}

10

ul li:nth-child(1) li:nth-child(2){color: brown;}

11

ul li:nth-child(1) li:nth-child(3){color: pink;}

12

ul li:nth-child(2) li:nth-child(1){color: gray;}

 

 

کلاس کاذب nth-last-child(n) برعکس nth-child(n) عمل ميکند، به اين صورت که از اخر به شمارش المنت ها ميپرداز.

اگر nth-last-child را جايگزين nth-child در کد css بالا کنيم نتيجه کد به شکل زير خواهد بود.