انتخابگرهای CSS
دسته بندی : آموزش CSS سطح مقاله : متوسط زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 18 بهمن 1399شما انتخابگرهای CSS را قبل از بلوک های اعلامیه CSS قرار می دهید. آن ها نشان می دهند کدام عناصر را می خواهید سبک کنید. این آموزش انتخابگرهای مورد استفاده همراه با ترکیب کننده ها و کاربرد یک قانون را برای گروهی از انتخاب کنندگان توضیح می دهد.
نکات اصلی انتخابگرهای CSS :
- انتخاب کنندگان CSS برای انتخاب عناصر خاص برای سبک سازی هستند.
- برای انتخاب دقیق تر می توانید از ترکیب کننده ها و انتخابگرها با هم استفاده کنید.
- استفاده از بیش از یک انتخاب کارآمد است زیرا شما چندین عنصر HTML را به طور هم زمان سبک می کنید.
انتخابگرها و ترکیب کننده ها
برای دستیابی به انتخاب ریز دانه ، استفاده از چند انتخابگر CSS به جای یک انتخاب مفید است. CSS روش های مختلفی را برای انتخاب عناصر با توجه به روابط بین آن ها ارائه می دهد. این ترکیب کننده ها بیانگر چنین روابطی هستند:
| What It Selects | Syntax | Title |
| عناصر معادل هر دو یا یکی از انتخاب کنندگان | S1, S2 | CSS Selector List |
| عناصر مطابق با S2 که فرزندان S1 هستند | S1 S2 | CSS Descendant Selector |
| عناصر مطابق با S2 که فرزندان مستقیم S1 هستند | S1 > S2 | CSS Child Selector |
| عناصر مطابق با S2 که فرزندان بعدی S1 هستند | S1 + S2 | Adjacent Sibling Selector |
| عناصر مطابق با S2 که یکی از خواهر و برادرهای بعدی S1 هستند | S1 ~ S2 | General Sibling Selector |
نکته: S1 نشان دهنده انتخاب اول است. S2 نشانگر انتخاب دوم است.
همین سبک را برای گروه های انتخاب کننده اعمال کنید
اعمال یک قانون یکسان در چندین گروه انتخاب کننده امکان پذیر است. بنابراین ، می توانید بیش از یک مجموعه از عناصر HTML را سبک کنید. به این مثال نگاه کنید:
h1, h2, h3, h4, h5, h6 {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif, 'sans serif';
}توجه: در مواردی که مرورگر از یکی از اپراتورها پشتیبانی نمی کند ، کل لیست انتخاب کننده رد می شود و سبک ها اعمال نمی شوند.
محبوب ترین انتخاب کننده
ساده ترین انتخابگر شناسه CSS شامل نماد هش / پوند (#) و نام شناسه منحصر به فرد یک عنصر است.
نکته: گرچه انتخابگر شناسه CSS کارآمدترین و محبوب ترین انتخاب کننده است ، داشتن شناسه های منحصر به فرد برای همه عناصر مهم است. نامهای تکراری می توانند باعث بروز مشکلاتی در مرورگرها شوند.
بحث در مورد انتخاب والدین CSS
افراد اغلب به دنبال انتخابگر والد CSS هستند. با این حال ، حتی CSS3 نیز چنین ویژگی را ارائه نمی دهد ، زیرا می تواند باعث مشکلات جدی در کارایی و عملکرد شود.
نکته: به جای جستجوی والد CSS ، باید از JavaScript استفاده کنید. پیشنهادات جی کوئری: انتخاب والدین برای بدست آوردن عناصری که دارای فرزند هستند.
برای بهترین نتیجه ، سعی کنید عناصر را با استفاده از یک انتخابگر اصلی CSS انتخاب کنید و سپس .filter (“: والد”) را اعمال کنید.
صفحه تقلب انتخاب گرهای CSS
لیست زیر شامل انتخابگرهای CSS موجود برای استفاده است. ما انتخاب کنندگان ذریه CSS و روش انتخاب اولین عناصر نوع CSS را بر می شماریم:
| What gets selected | Example | CSS Selector |
| همه عناصر با کلاس = “body” | body. | class. |
| عنصر با شناسه = “جدول” | table# | id# |
| همه عناصر | * | * |
| همه عناصر <بخش> | section | element |
| همه عناصر <بخش> و همه عناصر | section, a | element, element |
| همه عناصر در داخل عناصر a | section a | element element |
| همه عناصر که والدین عنصر بخش هستند | section > a | element > element |
| همه عناصر که بلافاصله بعد از عنصربخش قرار می گیرند | section + a | element + element |
| هر عنصر <li> که قبل از یک عنصر باشد | a ~ li | elementOne ~ elementTwo |
| عناصری که دارای ویژگی “هدف” هستند. | [target] | [attribute] |
| عناصر با هدف = “_ خالی” | [target=_blank] | [attribute=value] |
| عناصر دارای ویژگی عنوان حاوی کلمه “جدول” | [title~=table] | [attribute ~= value] |
| عناصری که صفت “lang” را روی “lt” تنظیم کرده اند | [lang|=lt] | [attribute |= value] |
| هر عنصر حاوی ویژگی ‘href’ که با “www” شروع می شود انتخاب می شود | link[href^=”www”] | [attribute ^= value] |
| هر عنصر حاوی ویژگی “href” است که با “www” خاتمه می یابد | link[href$=”.exe”] | [attribute $= value] |
| هر عنصر که مقدار صفت href آن حاوی زیرشاخه “css” است | link[href*=”css”] | [attribute *= value] |
| پیوند فعال | link:active | active: |
| پس از محتوای هر عنصر <بخش> چیزی وارد کنید | section::after | after:: |
| قبل از محتوای هر عنصر <بخش> چیزی وارد کنید | section::before | before:: |
| هر عنصر را علامت بزنید | input:checked | checked: |
| هر عنصر غیرفعال شده است | form:disabled | disabled: |
| هر عنصرکه فرزندی ندارد(از جمله گروه های متنی) | a:empty | empty: |
| هر عنصر <form> فعال شده است | form:enabled | enabled: |
| هر عنصر <section> اولین فرزند والدین خود است | section:first-child | first-child: |
| حرف اول از هر عنصر <section> | section::first-letter | first-letter:: |
| خط اول از هر عنصر <section> | section::first-line | first-line:: |
| هر عنصر اولین عنصر <بخش> والد آن است | section:first-of-type | first-of-type: |
| عنصر که دارای کانون است | form:focus | focus: |
| پیوندهای ماوس | link:hover | hover: |
| عناصر ورودی با یک مقدار در یک محدوده مشخص شده | input:in-range | in-range: |
| همه عناصر ورودی با مقدار نامعتبر | input:invalid | invalid: |
| هر عنصر با ویژگی زبان برابر با “en” است | (track:lang(en | (lang(language: |
| هر عنصر<a> که آخرین فرزند والدین خود است | a:last-child | last-child: |
| هر عنصر<a> که آخرین عنصر <a> والدین آن است. | a:last-of-type | last-of-type: |
| همه پیوندهای بازدید نشده | a:link | link: |
| هر عنصری که عنصرنباشد | (not(a: | (not(selector: |
| هر عنصر<section> که والدینی دارد و فرزند دوم آن است | section:nth-child2 | (nth-child(n: |
| هر عنصر <بخش> که فرزند دوم والدینش است ، از آخرین فرزند حساب می شود | section:nth-last-child2 | (nth-last-child(n: |
| هر عنصر<section> که از آخرین فرزند شمارش می شود ، دومین عنصر والدین خود است | section:nth-last-of-type2 | (nth-last-of-type(n: |
| هر عنصر <section> دومین عنصر <بخش> والد آن است | section:nth-of-type2 | (nth-of-type(n: |
| هر عنصر <section> تنها عنصر <section> والد خود است | section:only-of-type | only-of-type: |
| هر عنصر <section> که تنها فرزند والدین خود است | section:only-child | only-child: |
| عناصر ورودی بدون ویژگی “مورد نیاز” | input:optional | optional: |
| عناصر ورودی با مقداری خارج از یک محدوده مشخص شده | input:out-of-range | out-of-range: |
| عناصر ورودی که دارای ویژگی “فقط خواندنی” هستند | input:read-only | read-only: |
| عناصر ورودی با مشخصه “فقط خواندنی” مشخص نشده است | input:read-write | read-write: |
| عناصر ورودی با مشخصه “مورد نیاز” مشخص شده است | input:required | required: |
| عنصر ریشه سند | root: | root: |
| قسمت عنصری که توسط کاربر انتخاب می شود | selection:: | selection:: |
| عنصر فعال # صفحه فعلی | page:target# | target: |
| همه عناصر ورودی با مقدار معتبر | input:valid | valid: |
| همه پیوندهای بازدید شده | a:visited | visited: |
نکات مهم انتخابگرهای CSS:
- : n-of-type شروع به تکرار از طریق عناصر از بالای ترتیب منبع می کند. متفاوت از: nth-last-type که در مواردی از پایین ترتیب منبع تکرار می شود.
- CSS: انتخابگر نوع اول مطابقت یک عنصر را در ظرف خود پیدا می کند.
در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.
این مقاله چقدر براتون مفید بود؟