انتخاب کننده ها در css – بخش دوم
در بخش اول انتخابگر ها با انتخابگر های نوع ، کلاس ، نام و گروه سازی انتخاب کننده ها آشنا شدید ، اما قدرت انتخاب کننده ها به این چند مورد ختم نمی شود و قدرت های بیشتری را به شما در انتخاب عناصر صفحه می دهد .
ترکیب کننده ها (Combinator) :
در css شما قادر خواهید بود تا انتخابگری را بنویسید که خود شامل مجموعه ای از انتخابگرهای ساده می باشد .
در انتخابگرهای ساده ما عناصر مورد نظر خود را برا اساس نام ، کلاس و .. انتخاب میکردیم اما نحوه کار ترکیب کننده ها متفاوت تر از انتخاب گرهای ساده می باشد .انتخاب گرهای ترکیب کننده به شما این امکان را می دهد تا عنصر یا عناصر مورد نظر خود را بر اساس موقعیت در صفحه انتخاب نمایید مثلا تمام تگ های p که در داخل یک تگ div قرار دارند و… .
انواع انتخابگرهای ترکیب کننده :
انتخابگر اولاد (descendant Selector)
انتخابگر فرزند (Child selector)
انتخابگر هم نوع مجاور(adjacent sibling Selector)
انتخابگر اولاد descendant Selector:
این انتخابگر المان هایی را انتخاب می کند در در داخل المان دیگر باشد .
شکل کلی این نوع انتخابگر به صورت زیر می باشد :
|
1 |
A B {قواعد} |
دستور بالا تمام المان هایی را که نام آنها B باشد و در داخل المانی به نام A باشند را انتخاب می کند .
|
1 |
div a{...} |
دستور بالا تمام تگ های a را که در دخل تگ div باشند را انتخاب میکند .
نکته : ممکن است المان داخلی به صورت مستقیم داخل المان پدر (اولی) نباشد .این انتخاب کننده تمام تگ هایی را چه به صورت مستقیم و چه به صورت غیر مستقیم داخل المان اول باشد را انتخاب می کنند به مثال زیر توجه کنید :
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <div> <p><a href=www.hozhan.ir>هوژان</a></p> <a href=www.google.com>Google</a> <p><span><a href=www.yahoo.com>Yahoo</a></span></p> </div></body> |
دستور css :
|
1 2 3 4 5 6 7 8 9 |
div a { Color:blue; Text-decoration:none; } |
نتیجه :
در مثال بالا فقط یه تگ a به صورت مستیقم داخل تگ div می باشد اما انتخابگری را که نوشته ایم تمام تگ های a را انتخاب میکند و رنگ آنها را به آبی و بدون زیر خط نمایش می دهد .
مثال :
|
1 2 3 4 5 6 7 |
<body> <h1>Heading <em>here</em> </h1> <p>Lorem ipsum dolor <em>sit</em> amet.</p> </body> |
دستور css :
|
1 |
p em {color: blue; } |
نتیجه :
تگ em که به صورت پس زمینه سیاه در شکل نمایش داده می شود را انتخاب میکند و رنگ آن را به آبی تغییر میدهد .
مثال :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul> <li>Item</li> </ul> <ol type="i"> <li>Item i</li> <li>Item ii</li> </ol> |
می خواهیم تمام تگ های li را که در داخل تگ ul هستند را انتخاب و رنگ آنها را به آبی تغییر دهیم.برای این کار دستور زیر را می نویسیم :
|
1 |
ul li { color: blue; } |
نکته :
شما می توانید به هر تعداد که لازم باشد و نیاز دارید دستور css را گسترش دهید .
مثال :
|
1 |
div p span a{قواعد} |
نتیجه :
تمام تگ های a را که داخل تگ span و خود تگ span داخل تگ p و خود تگ p هم داخل تگ div قرار دارند را انتخاب میکند .در اصل قواعد مورد نظر فقط بر روی تگ یا تگ های a اعمال می شود.
انتخابگر فرزرند :
در انتخابگر اولاد تمام المان هایی را که چه به صورت مستقیم و چه به صورت غیر مستقیم داخل المان والد خود بودند را انتخاب مبکرد اما انتخابگر فرزند تنها المان یا المان هایی را انتخاب میکند که به صورت مستقیم داخل المان والد خود باشند .
دستور css این نوع انتخابگر همانند انتخابگر اولاد می باشد با این تفاوت که مابین آنها علامت < قرار میگیرد .
شکل کلی :
|
1 |
A>B {قواعد} |
تمام المان هایی که نام آنها B باشد و به صورت مستقیم داخل تگی به نام A باشند را انتخب میکند .
برای درک بهتر ین نوع انتخابگر از مثال اول همین مقاله استفاده میکنیم :
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <div> <p><a href=www.hozhan.ir>هوژان</a></p> <a href=www.google.com>Google</a> <p><span><a href=www.yahoo.com>Yahoo</a></span></p> </div></body> |
قصد داریم تمام المان هایی را که به صورت مستقیم داخل المان div هستند را انتخاب کنیم ،برای این کار دستور زیر را می نویسیم :
|
1 2 3 4 5 6 7 8 9 |
div>a { Color:blue; Text-decoration:none; } |
نتیجه :
فقط تگ a را که متن آن google می باشد انتخاب میکند زیرا فقط این تگ به صورت مستقیم داخل تگ div قرار دارند و دو تگ دیگر (a) به صورت غیر مستقیم داخل div هستند .
مثال :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<ul> <li>Item</li> <li> <ol> <li>Item i</li> <li>Item ii</li> </ol> </li> </ul> |
میخواهیم تمام li هایی را که به صورت مستقیم داخل ul هستند را انتخاب نماییم برای این کار از دستور زیر استفاده میکنیم .
|
1 |
ul>li{قواعد} |
توجه داشته باشید که li های داخل ol که داخل li هستند انتخاب نمی شوند .
همانند انتخابگر اولاد میتوانید بیشتر ز یک نوع انتخابگر را گسترش دهید .
|
1 |
Div p span a{قواعد} |
همانند انتخابگر اولاد می باشد با این تفاوت که فقط المان هایی که به صورت مستقیم وجود دارند انتخاب میشوند.
انتخابگر هم نوع مجاور :
گاهی اوقات نیاز پیدا میکنیم که المانی را انتخاب کنیم که کنار المان دیگر می باشد ،این کار بر عهده انتخابگر هم نوع مجاور می باشد .
شکل کلی دستور :
|
1 |
E+F {قواعد} |
این نوع انتخابگر المانی را انتخاب مبکند که نام آن F و در کنار المانی با نام E باشد .
المان F باید بعد از المان E باشد در غیر اینصورت دستور فوق بی نتیجه می باشد .
|
1 2 3 4 5 6 7 8 9 |
<body> <h2>Heading 2 <em>text</em></h2> <h3>Heading 3 text</h3> <p>This is <em>text</em> and more <strong>text</strong></p> </body> |
می خواهیم تگ h3 را با استفاده از انتخابگر هم نوع مجاور انتخاب نماییم برای اینکار به صورت زیر عمل می کنیم :
|
1 |
h2+h3 {color:blue} |
توصیه میکنم برای یادگیری بهتر و به خاطر سپردن دستورات فوق ، به صورت عملی دستورات را بر روی عناصر مختلف بکار گیرید و سعی کنید به روش های مختلف و مثال های مختلف عناصر را در صفحه انتخاب نمایید .
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.