ترکیبکنندههای CSS
- پچھلے پیج CSS ترتیب
- پائیدار پیج سی ایس ایس ڈرائیور
ترکیبکنندههای CSS
ترکیبکننده یک مکانیزم برای توضیح ارتباط بین انتخابگرها است.
انتخابگرهای CSS میتوانند شامل چندین انتخابگر ساده باشند. در بین انتخابگرهای ساده، میتوانیم یک ترکیبکننده را قرار دهیم.
در CSS چهار نوع مختلف از ترکیبکننده وجود دارد:
- انتخابگر نسل (فاصله)
- انتخابگر فرزند (
>) - انتخابگر برادر همسنگ (
+) - انتخابگر برادر عام (
~)
انتخابگر نسل
انتخابگر نسل با تطبیق همه عناصر نسل که به عناصر مشخص شده متصل هستند.
در این مثال، همه عناصر <p> در داخل عناصر <div> انتخاب میشوند:
مثال
div p {
background-color: yellow;
}
انتخابگر فرزند
انتخابگر فرزند با تطبیق همه عناصر فرزند که به عناصر مشخص شده متصل هستند.
در این مثال، همه عناصر <p> که زیر عناصر <div> قرار دارند انتخاب میشوند:
مثال
div > p {
background-color: yellow;
}
انتخابگر برادر همسنگ
انتخابگر برادر همسنگ با تطبیق همه عناصر همسنگ که به عناصر مشخص شده همسنگ هستند.
عناصر برادر (همسنگ) باید دارای همان پدر باشند، معنای "همسنگ" به معنای "پس از آن" است.
در این مثال، همه عناصر <p> که بعد از عناصر <div> قرار دارند انتخاب میشوند:
مثال
div + p {
background-color: yellow;
}
انتخابگر برادر عام
انتخابگر برادر عام با تطبیق همه عناصر همسنگ که به عناصر مشخص شده متصل هستند.
در این مثال، همه عناصر <p> که همسنگ عناصر <div> هستند انتخاب میشوند:
مثال
div ~ p {
background-color: yellow;
}
همه انتخابگرهای ترکیبی CSS
| انتخابگر | نمونه | توضیحات نمونه |
|---|---|---|
| آئیٹم آئیٹم | div p | اخترتم همه عناصر <p> در داخل عناصر <div>. |
| آئیٹم>آئیٹم | div > p | کسی آئیٹم کا والد آئیٹم <div> علامت ہے، اس کی تمام <p> علامتوں کا انتخاب کریں۔ |
| آئیٹم+آئیٹم | div + p | کسی <div> علامت کے بعد کا ہر <p> علامت انتخاب کریں۔ |
| آئیٹم1~آئیٹم2 | p ~ ul | کسی <p> علامت کے آغاز سے پہلے کا ہر <ul> علامت انتخاب کریں۔ |
- پچھلے پیج CSS ترتیب
- پائیدار پیج سی ایس ایس ڈرائیور
