انتخاب کنندگان CSS

انتخاب کنندگان CSS الگوی انتخاب عناصری را که مجموعه ای از قوانین CSS در آن اعمال می شود ، تعریف می کنند.

انتخاب کنندگان CSS را می توان بر اساس نوع عناصری که می توانند انتخاب کنند ، در دسته های زیر قرار دهند.

انتخاب کنندگان اصلی

همه عناصر را انتخاب می کند. به صورت اختیاری ، ممکن است محدود به یک فضای نام خاص یا همه مکان های نام باشد.

نحو: * ns | * * | *

مثال: * با تمام عناصر سند مطابقت خواهد داشت.

تمام عناصری را که نام گره داده شده را انتخاب می کنند ، انتخاب می کند.

نحو: نام عناصر

مثال: ورودی با هر عنصر مطابقت خواهد داشت.

تمام عناصری را که دارای ویژگی کلاس داده شده هستند انتخاب می کند.

نحو: . classname

مثال: . index با هر عنصری که دارای کلاس = "فهرست" باشد مطابقت دارد.

یک عنصر را بر اساس مقدار ویژگی شناسه خود انتخاب می کند. فقط باید یک عنصر با شناسه مشخص در یک سند وجود داشته باشد.

نحو: #نام

مثال: #TOC با عنصری که دارای id = "toc" است مطابقت دارد.

تمام عناصری را که دارای ویژگی مشخص هستند ، انتخاب می کند.

نحو: [att] [attr = مقدار] [ATTR~= مقدار] [att | = مقدار] [attr^= مقدار] [att $ = مقدار] [attr*= مقدار]

مثال: [AutoPlay] با تمام عناصری که دارای ویژگی AutoPlay هستند (به هر مقدار) مطابقت دارد.

انتخاب کنندگان گروه بندی

، انتخاب کننده یک روش گروه بندی است که تمام گره های تطبیق را انتخاب می کند.

نحو: الف ، ب

مثال: Div ، Span با هر دو و عناصر مطابقت خواهد داشت.

ترکیب کننده

ترکیب "" (فضا) گره هایی را انتخاب می کند که فرزندان عنصر اول هستند.

نحو: A B

مثال: Div Span با تمام عناصر موجود در یک عنصر مطابقت خواهد داشت.

The>Combinator گره هایی را انتخاب می کند که فرزندان مستقیم عنصر اول هستند.

Syntax: A> B

در~Combinator خواهران و برادران را انتخاب می کند. این بدان معنی است که عنصر دوم از اول (هرچند که لزوماً بلافاصله) دنبال می کند ، و هر دو والدین یکسان هستند.

نحو: الف~ B

مثال: P~Span با تمام عناصر پیروی از A ، بلافاصله یا نه مطابقت خواهد داشت.

+ ترکیبی + با عنصر دوم فقط در صورتی که بلافاصله عنصر اول را دنبال کند مطابقت دارد.

نحو: A + B

مثال: H2 + P با اولین عنصر که بلافاصله از یک عنصر H2 پیروی می کند مطابقت دارد.

||Combinator گره هایی را که متعلق به یک ستون هستند انتخاب می کند.

نحو: A ||شرح

مثال: col ||TD با تمام عناصر متعلق به دامنه آن مطابقت خواهد داشت.

کلاسهای شبه و عناصر شبه

:: شبه امکان انتخاب عناصر را بر اساس اطلاعات دولتی که در درخت اسناد موجود نیست ، امکان پذیر است.

مثال: الف: بازدید شده با تمام عناصری که توسط کاربر بازدید شده است مطابقت خواهد داشت.

:: شبه نمایانگر موجوداتی است که در HTML گنجانده نشده است.

مثال: P :: خط اول با خط اول همه عناصر مطابقت خواهد داشت.

ساختار یک انتخاب کننده

اصطلاح "انتخاب کننده" می تواند به یکی از موارد زیر مراجعه کند:

یک انتخاب کننده با یک مؤلفه واحد ، مانند یک انتخاب کننده شناسه منفرد یا انتخاب کننده نوع ، که در ترکیب با یا حاوی هر مؤلفه یا ترکیب کننده انتخابی دیگر استفاده نمی شود. گفته می شود که یک عنصر خاص با یک انتخاب ساده مطابقت دارد وقتی که آن انتخاب ساده به طور دقیق عنصر را توصیف می کند. همه انتخاب کنندگان اصلی ، ویژگی ها و کلاسهای شبه و شبه عناصر ، انتخاب کننده های ساده هستند.

دنباله ای از انتخاب کننده های ساده که توسط یک ترکیب کننده از هم جدا نمی شوند. یک انتخاب کننده مرکب مجموعه ای از شرایط همزمان را روی یک عنصر واحد نشان می دهد. گفته می شود که یک عنصر معین با انتخاب ترکیب مطابقت دارد وقتی عنصر با تمام انتخاب کنندگان ساده در انتخاب کننده ترکیب مطابقت داشته باشد.

در یک انتخاب کننده ترکیبی ، انتخاب کننده نوع یا یک انتخاب جهانی در یک انتخاب کننده ترکیب باید ابتدا در دنباله انتخاب کنندگان قرار گیرد. فقط یک انتخاب کننده نوع یا انتخاب جهانی در دنباله مجاز است. از آنجا که Whitespace نمایانگر ترکیبی از فرزندان است ، هیچ فضای سفیدی بین انتخاب کنندگان ساده در یک انتخاب کننده ترکیب مجاز نیست.

مثال:#انتخاب شده

دنباله ای از یک یا چند انتخاب کننده ساده و/یا مرکب که توسط ترکیب کننده ها از هم جدا می شوند. یک انتخاب کننده پیچیده مجموعه ای از شرایط همزمان را بر روی مجموعه ای از عناصر نشان می دهد. این شرایط در زمینه روابط توصیف شده توسط ترکیبات اعمال می شود. گفته می شود که یک عنصر معین با انتخاب پیچیده مطابقت دارد وقتی عنصر با انتخاب کننده ترکیبات و ترکیبات بین انتخاب کنندگان ترکیب مطابقت داشته باشد.

Examples: a#selected>. آیکون<.>، جعبه H2 + P<.>، A . ICON

انتخاب کننده ای که یک عنصر را نسبت به یک یا چند عنصر لنگر قبل از یک ترکیب کننده نشان می دهد. انتخاب کننده های نسبی که با یک ترکیب صریح شروع نمی شوند ، دارای یک ترکیبی از فرزندان ضمنی هستند.

Examples: + div#topic>#ارجاع<.>,>. آیکون<.>، DT: HAS (+ IMG)~DD

یک لیست جدا از کاما از انتخاب کنندگان ساده ، مرکب یا پیچیده. اگر نوع انتخاب کننده تشکیل دهنده لیست انتخاب کننده مهم باشد اما نامشخص باشد ، به آن یک لیست انتخاب کننده پیچیده گفته می شود. گفته می شود که یک عنصر معین با یک لیست انتخاب کننده مطابقت دارد وقتی که عنصر با هر (حداقل یک) از انتخاب کنندگان در آن لیست انتخاب مطابقت داشته باشد. اطلاعات بیشتر در مورد زمانی که یک لیست انتخاب کننده نامعتبر است و نحوه ساخت یک لیست انتخاب کننده بخشنده را بخوانید.

مثال: #main ، مقاله.

مشخصات فنی

برای جزئیات بیشتر در مورد آن ، جداول مشخصات شبه کلاس و شبه عنصر را مشاهده کنید.

همچنین ببینید

• : دارای () کلاس شبه
• ویژگی CSS
• لیست انتخاب کننده