انتخابگر ترکیبی در CSS
در CSS با انتخابگر های نام تگ، id و class، المان ها را انتخاب و آدرس دهی می کنیم. علاوه بر این انتخابگرهای ساده، در CSS می توانیم از انتخابگرهای ترکیبی نیز استفاده کنیم. ترکیب کننده ها (combinators)، رابطه ی بین انتخابگرها را توضیح می دهند.
نکته: این آموزش، ادامه آموزش انتخابگرهای css است.
با کمک انتخابگرهای ترکیبی می توانیم آدرس دهی دقیق تری داشته باشیم.
انتخابگر های ترکیبی 4 نوع هستند:
- انتخابگر نسلی (space)
- انتخابگر فرزند (>)
- انتخابگر برادر کناری (+)
- انتخابگر برادر عمومی (~)
انتخابگر نسلی (space) در CSS
انتخابگر نسلی (descendant selector) با علامت فاصله (space) مشخص می شود.
انتخابگر نسلی، تمام المان هایی که در نسل المان والد هستند را شامل می شود.
div p {
color: red;
}انتخابگر فرزند (>) در CSS
انتخابگر فرزند (child selector) با علامت بزرگتر (>) مشخص می شود.
انتخابگر فرزند، تمام المان هایی که فرزندِ المانِ والد هستند (در نسل اول هستند) را شامل می شود.
div > p {
color: red;
}انتخابگر برادر کناری (+) در CSS
انتخابگر برادر کناری (adjucent sibling selector) با علامت بعلاوه (+) مشخص می شود. این انتخابگر با نام خواهر برادر کناری یا مجاور نیز شناخته می شود.
انتخابگر برادر کناری، المانی که بعد از المان مشخص شده است، را شامل می شود.
div + p {
color: red;
}انتخابگر برادر عمومی (~) در CSS
انتخابگر برادر عمومی (general sibling selector) با علامت مدک (~) مشخص می شود. این انتخابگر با نام برادر خواهر عمومی نیز شناخته می شود.
نکته: برای استفاده از علامت مدک یا tilde، در کیبورد انگلیسی از کلید ترکیبی SHIFT + ` استفاده کنید.
انتخابگر برادر عمومی، تمام المان های بعد از المان مشخص شده است، را شامل می شود.
div ~ p {
color: red;
}خلاصه درس
| انتخابگر ها | مثال | توضیحات مثال |
| انتخابگر نسلی | div p |
تمامی المان های <p> که در نسل المان <div> هستند. |
|
انتخابگر فرزند |
div > p |
تمام المان های <p> را که فرزند (نسل اول) المان <div> هستند. |
| انتخابگر برادر کناری | div + p |
اولین المان <p> را که بلافاصله بعد از المان های <div> قرار دارد. |
| انتخابگر برادر عمومی | div ~ p |
تمام المان <p> را که بعد از المان <div> قرار دارد. |
احسان اسلامی
