سلکتورها (یا گزینشگرها) بخش مهمی از دستورات CSS را تشکیل می دهند. سلکتور، الگویی است که به عنصر HTML که می خواهیم طراحی کنیم اشاره می کند. سلکتورها به پنج بخش مختلف تقسیم می شوند که هر بخش شامل انواع متفاوتی از سلکتورهاست.
| سلکتور | توضیحات | |
|---|---|---|
| سلکتورهای پایه | ||
| * | سلکتور جهانی (Universal)، کلیه ی عناصر صفحه را انتخاب می کند | |
| E | سلکتور نوع (Type) کلیه عناصر E را انتخاب می کند | |
| test. | کلیه ی عناصر با کلاس test را انتخاب می کند (class="test") | |
| demo# | کلیه ی عناصر با آی دی demo را انتخاب می کند (id="demo") | |
| سلکتورهای ویژگی | ||
| [attribute] | هر عنصر با ویژگی attribute را انتخاب می کند | |
| ["attribute="value] | هر عنصر با ویژگی attribute که مقدار دقیق value را دارد انتخاب می کند | |
| ["attribute~="value] | هز عنصر با ویژگی attribute را انتخاب می کند به صورتی که ویژگیِ attribute تعدادی مقدار داشته باشد که این مقادیر با فاصله از هم جداشده اند و یکی از مقادیر، مقدارِ دقیقِ value است. | |
| ["attribute|="value] | هر عنصر با ویژگی attribute را انتخاب می کند به صورتی که مقدار آن value باشد یا با -value شروع شود. | |
| ["attribute^="value] | هر عنصر با ویژگی attribute را انتخاب می کند که مقدار آن با رشته ی value شروع شود. | |
| ["attribute$="value] | هر عنصر با ویژگی attribute را انتخاب می کند که مقدار آن با رشته ی value به پایان برسد. | |
| ["attribute*="value] | هر عنصر با ویژگی attribute را انتخاب می کند که مقدار آن شامل رشته ی value باشد. | |
| سلکتورهای شبه کلاس ها (Pseudo-classes) | ||
| link: | لینک دیده نشده را انتخاب می کند. | |
| visited: | لینک دیده شده را انتخاب می کند. | |
| active: | عنصر را حین فعالیت انتخاب می کند. | |
| hover: | لینک را موقع عبور موس انتخاب می کند. | |
| focus: | عنصر ورودی هنگامی که روی آن تمرکز می شود را انتخاب می کند. | |
| target: | عنصری که هدف یک URl است را انتخاب می کند. | |
| (lang(language | هر عنصر با زبان language را انتخاب می کند (یعنی ویژگی lang برای عنصر برابر language باشد). | |
| first-child: | هر عنصری را انتخاب می کند که فرزند اول والدینش باشد. | |
| last-child: | هر عنصری را انتخاب می کند که فرزند آخر والدینش باشد. | |
| first-of-type: | هر عنصری را انتخاب می کند که اولین هم نیا (خواهر یا برادر - sibling) از نوع خودش باشد. | |
| last-of-type: | هر عنصری را انتخاب می کند که آخرین هم نیا (خواهر یا برادر - sibling) از نوع خودش باشد. | |
| (nth-child(n: | عنصری را انتخاب می کند که nامین فرزند والدینش باشد. | |
| (nth-last-child(n: | عنصری را انتخاب می کند که nامین فرزند والدینش، از آخر باشد. | |
| (nth-of-type(n: | عنصری را انتخاب می کند که nامین هم نیا از نوع خودش باشد. | |
| (nth-last-of-type(n: | عنصری را انتخاب می کند که nامین هم نیا از نوع خودش، از آخر باشد | |
| only-child: | هر عنصری را انتخاب می کند با این شرط که تنها فرزندِ والدینش باشد. | |
| only-of-type: | هر عنصری را انتخاب می کند با این شرط که تنها نوع در بین هم نیاها(خواهر و برادرها)ی خود باشد. | |
| empty: | عنصری را انتخاب می کند که فرزند نداشته باشد. | |
| root: | عنصری را انتخاب می کند که ریشه (root) باشد. | |
| enabled: | هر عنصر فعال شده را انتخاب می کند. | |
| disabled: | هر عنصر غیرفعال را انتخاب می کند. | |
| checked: | هر عنصر علامت دار را انتخاب می کند. | |
| (not(s: | هر عنصر که با سلکتور s مطابقت ندارد. | |
| سلکتورهای شبه عنصرها (Pseudo elements) | ||
| first-line:: | خط اول عناصر را انتخاب می کند. | |
| first-letter:: | حرف اول عناصر را انتخاب می کند. | |
| before:: | محتوایی را قبل از عنصر تولید می کند. | |
| after:: | محتوایی را بعد از عنصر تولید می کند. | |
| سلکتورهای ترکیب کننده (Combinators) | ||
| E F | هر عنصر F که از نسل عنصر E (درون عنصر E) باشد. | |
| E > F | هر عنصر F که فرزندِ (مستقیمِ) عنصر E باشد. | |
| E + F | هر عنصر F که دقیقا بعد از عنصر E (خواهر یا برادر بعدی عنصر E) باشد. | |
| E ~ F | هر عنصر F که یکی از هم نیاهای بعدی عنصر E باشد. | |
درباره این سایت