این آموزش در تاریخ ۱۴۰۴/۰۸/۲۵ آپدیت شده است.
آموزش انتخابگرها یا Selectors در CSS بخش دوم
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش انتخابگرها یا Selectors در CSS بخش دوم با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 انتخابگرها یا Selectors در CSS بخش دوم
- 2 انتخابگر صفت
- 3 انتخاب کن صفاتی که شامل حداقل یک کلمه مورد نظر ما باشد
- 4 انتخاب کن صفاتی که از یک کلمه خاص شروع می شوند
- 5 انتخاب کن صفاتی که از یک کلمه خاص شروع می شوند
- 6 انتخاب کن صفاتی که با کلمه خاصی به پایان می رسند
- 7 انتخاب کن صفاتی که شامل کلمه مورد نظر ما باشد
- 8 انتخابگر ترکیبی یا Combinator در CSS
- 9 انتخاب کن تمامی تگ هایی که درون یک تگ دیگر است
- 10 انتخاب کن فرزندان یک تگ را
- 11 انتخاب کن اولین تگی که بلافاصله بعد از یک تگ دیگر اومده باشد
- 12 انتخاب کن تمامی تگ های موجود در یک صفحه را که بعد از تگ مورد نظر ما اومده باشد
انتخابگرها یا Selectors در CSS بخش دوم
در جلسه قبلی ما با انواع انتخابگرها در CSS آشنا شدیم و تعداد زیادی شون رو هم کامل یاد گرفتیم، که پیشنهاد میکنم حتما جلسه قبلی رو مطالعه نمایید.
آموزش بخش اول انتخابگرها یا Selectors در CSS را مشاهده نمایید.
حال در این جلسه میخوایم با ۲ نوع دیگه از انتخابگرها آشنا شویم :
- انتخابگرهای صفت
- انتخابگرهای ترکیبی
Free-Learn
انتخابگر صفت
در این روش ما میتونیم صفت یک تگ رو انتخاب کنیم سپس دستورات CSS مورد نظرمون رو روش اعمال کنیم، پس وقتی بتونیم صفت یک تگ رو انتخاب کنیم بهش میگیم انتخابگر صفت.
انواع انتخابگرهای صفت
- انتخاب کن صفاتی که شامل حداقل یک کلمه مورد نظر ما باشد
- انتخاب کن صفاتی که از یک کلمه خاص شروع می شوند
- انتخاب کن صفاتی که از یک کلمه خاص شروع می شوند ( مهم نیست کلمه چسبیده باشه یا نه )
- انتخاب کن صفاتی که با کلمه خاصی به پایان می رسند
- انتخاب کن صفاتی که شامل کلمه مورد نظر ما باشد
Free-Learn
انتخاب کن صفاتی که شامل حداقل یک کلمه مورد نظر ما باشد
در این روش مثلا من میگم انتخاب کن تمامی تگ های P رو که در صفت title شون کلمه free وجود داشت، اینم میره و تمامی تگ های p رو پیدا میکنه و نگا به صفت title شون میکنه اگه کلمه free داخلش بود انتخابش میکنه.
- اگه کلمه به کلمه دیگری چسبیده باشه انتخاب نمیشه
- اگه بین کلمات – یا _ باشه بازم انتخاب نمیشه
شکل کلی :
|
1 |
Tag_name [attribute_name~="value"] { ... } |
نکته : کلمه ی مورد نظر ما اگه به کلمه ی دیگری چسبیده باشد انتخاب نمی شود.
مثال : تگ های P که داخل صفت title شون کلمه free باشه رو انتخاب میکنه
|
1 2 3 4 5 6 7 |
<style> p[title~="free"]{ background-color:yellow; } </style> |
Free-Learn
انتخاب کن صفاتی که از یک کلمه خاص شروع می شوند
در این روش داره میگه انتخاب کن تمامی صفاتی را که با کلمه مورد نظر من شروع می شوند، در این روش باید کلمه مورد نظر ما با کاراکتر – از دیگر کلمات جدا شده باشه تا بتونه انتخاب شه.
- اگه کلمه به کلمه دیگری چسبیده باشه انتخاب نمیشه
- اگه بین کلمات _ باشه انتخاب نمیشه
- اگه بین کلمات فاصله باشه انتخاب نمیشه
شکل کلی :
|
1 |
Tag_name [attribute|="value"] { ... } |
مثال :
|
1 2 3 4 5 6 7 |
<style> p[title|="free"]{ background-color:yellow; } </style> |
Free-Learn
انتخاب کن صفاتی که از یک کلمه خاص شروع می شوند
این روش همانند روش بالاست فقط با این تفاوت که دیگه براش مهم نیست کلمه خاص ما به دیگر کلمات چسبیده باشد یا نه، در هر صورت انتخابش میکنه.
- اگه کلمه به کلمه دیگری چسبیده باشه انتخاب میشه
- اگه بین کلمات – یا _ باشه انتخاب میشه
- اگه بین کلمات فاصله باشه انتخاب میشه
شکل کلی :
|
1 |
Tag_name [attribute^="value"] { ... } |
مثال :
|
1 2 3 4 5 6 7 |
<style> p[title^="free"]{ background-color:yellow; } </style> |
Free-Learn
انتخاب کن صفاتی که با کلمه خاصی به پایان می رسند
این انتخابگر صفاتی رو انتخاب میکنه با یک کلمه خاص مورد نظر ما به پایان می رسند ، براش مهم نیست که کلمه قبلش بهش چسبیده باشه یا نه ! حتی مهم نیست که کلمه قبلش با کاراکترهای – یا _ به کلمه خاص ما چسبیده باشد.
- اگه کلمه به کلمه دیگری چسبیده باشه انتخاب میشه
- اگه بین کلمات – یا _ باشه انتخاب میشه
- اگه بین کلمات فاصله باشه انتخاب میشه
شکل کلی :
|
1 |
Tag_name [attribute$="value"] { ... } |
مثال :
|
1 2 3 4 5 6 7 |
<style> p[title$="learn"]{ background-color:yellow; } </style> |
Free-Learn
انتخاب کن صفاتی که شامل کلمه مورد نظر ما باشد
در این روش دیگه هیچی مهم نیست براش ، مهم فقط اینه که کلمه مورد نظر ما درون صفت وجود داشته باشد، یعنی مهم نیست اولش باشد یا آخرش، مهم نیست چسبیده باشد یا نه مهم فقط بودنش تو صفت هست.
- اگه کلمه به کلمه دیگری چسبیده باشه انتخاب میشه
- اگه بین کلمات – یا _ باشه انتخاب میشه
- اگه بین کلمات فاصله باشه انتخاب میشه
- اگه کلمه اول متن باشه انتخاب میشه
- اگه کلمه آخر متن باشه انتخاب میشه
شکل کلی :
|
1 |
Tag_name [attribute*="value"] { ... } |
مثال :
|
1 2 3 4 5 6 7 |
<style> p[title*="free"]{ background-color:yellow; } </style> |
Free-Learn
انتخابگر ترکیبی یا Combinator در CSS
این نوع از انتخابگر داره رابطه های بین انتخابگرهارو مشخص میکنه، یعنی مثلا میگه انتخاب کن تمامی تگ های P که درون تگ DIV هستند. در ادامه با تمامی انتخابگرهای ترکیبی آشنا خواهید شد.
انواع انتخابگرهای ترکیبی در CSS
- انتخاب کن تمامی تگ هایی که درون یک تگ دیگر است
- انتخاب کن فرزندان یک تگ را
- انتخاب کن اولین تگی که بلافاصله بعد از یک تگ دیگر اومده باشد
- انتخاب کن تمامی تگ های موجود در یک صفحه را که بعد از تگ مورد نظر ما اومده باشد
Free-Learn
انتخاب کن تمامی تگ هایی که درون یک تگ دیگر است
در این روش داره میگه انتخاب کن تمامی تگ هایی که درون یک تگ دیگر هستند و سپس دستورات CSS مورد نظرمون رو روش اعمال کن.
شکل کلی :
|
1 |
Tag_name_فاصله_Tag_name { ... } |
مثال : تمامی تگ های P که داخل تگ DIV هستن رو انتخاب میکنه
|
1 2 3 4 5 6 7 |
<style> div p{ background-color:yellow; } </style> |
Free-Learn
انتخاب کن فرزندان یک تگ را
در این روش تمامی فرزندان یک تگ انتخاب می شود.
شکل کلی :
|
1 |
Tag_name > Tag_name { ... } |
مثال : در این مثال یکی از تگ های p انتخاب نمی شود به دلیل اینکه اون تگ p فرزند تگ i است نه فرزند تگ div
|
1 2 3 4 5 6 7 |
<style> div > p{ background-color:yellow; } </style> |
Free-Learn
انتخاب کن اولین تگی که بلافاصله بعد از یک تگ دیگر اومده باشد
در این روش میره و اولین تگی که بلافاصله بعد از تگ مورد نظر ما اومده باشه رو انتخاب میکنه.
شکل کلی :
|
1 |
Tag_name + Tag_name { ... } |
مثال : اولین تگ p که بعد از تگ div اومده باشه رو انتخاب میکنه
|
1 2 3 4 5 6 7 |
<style> div + p{ background-color:yellow; } </style> |
Free-Learn
انتخاب کن تمامی تگ های موجود در یک صفحه را که بعد از تگ مورد نظر ما اومده باشد
در این روش دیگه براش مهم نیست تگ مورد نظر ما بلافاصله بعد از یک تگ اومده باشه یا نه، هر کجای صفحه باشه انتخابش میکنه، فقط باید اون تگ یک تگ والد باشه ( والد یعنی نباید اون تگ داخل تگ دیگری قرار داشته باشه )
شکل کلی :
|
1 |
Tag_name ~ Tag_name { ... } |
مثال : انتخاب تمامی تگ های P که بعد از DIV قرار داشته باشن
|
1 2 3 4 5 6 7 |
<style> div ~ p{ background-color:yellow; } </style> |
خب دوستان خسته نباشید اینم از ( آموزش انتخابگرها یا Selectors در CSS بخش دوم ) که به پایان رسید، امیدوارم که هیچ مشکلی در این جلسه نداشته باشید، لطفا در ادامه و در بخش های بعدی همچنان با بنده همراه باشید.
