انتخابگرهای CSS

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

جدول زیر حاوی فهرست همه انتخابگرهای تعریف شده در CSS می باشد

انتخابگر مثال توضیحات مثال
.class .intro همه عناصر با class=”intro” را انتخاب می کند
#id #firstname همه عناصر با id=”firstname” را انتخاب می کند
* * همه عناصر elements
element p همه عناصر <p> را انتخاب می کند
element,element div, p همه عناصر <div> و <p> را انتخاب می کند
element element div p همه عناصر <p> که داخل <div> باشد را انتخاب می کند
element>element div > p همه عناصر <p> که عنصر والد آنها <div> باشد را انتخاب می کند
element+element div + p همه عناصر <p> که بلافاصله بعد از عنصر <div> آمده باشد را انتخاب می کند
element1~element2 p ~ ul هر عنصر <ul> که پیش از آن عنصر <p> باشد را انتخاب می کند
[attribute] [target] همه عناصر با صفت target را انتخاب می کند
[attribute=value] [target=_blank] همه عناصر با صفت target=”_blank” را انتخاب می کند
[attribute~=value] [title~=flower] همه عناصر با صفت title که شامل کلمه “flower” باشد را انتخاب می کند
[attribute|=value] [lang|=en] همه عناصر با صفت lang که مقدار آن با “en” شروع شده باشد را انتخاب می کند
[attribute^=value] a[href^=”https”] هر عنصر <a> که مقدار صفت href با “https” شروع شده باشد را انتخاب می کند
[attribute$=value] a[href$=”.pdf”] هر عنصر <a> که مقدار صفت href آن با “.pdf” تمام شده باشد را انتخاب می کند
[attribute*=value] a[href*=”datadars”] هر عنصر <a> که مقدار صفت href آن شامل “datadars” باشد را انتخاب می کند
:active a:active پیوند فعال را انتخاب می کند
::after p::after محتوای تعریف شده را پس از عنصر <p> اضافه می کند
::before p::before محتوای تعریف شده را پیش از عنصر <p> اضافه می کند
:checked input:checked هر عنصر <input> تیک خورده را انتخاب می کند
:disabled input:disabled هر عنصر <input> غیر فعال شده را انتخاب می کند
:empty p:empty هر عنصر <p> فاقد زیر مجموعه را انتخاب می کند (فقط شامل متن باشد)
:enabled input:enabled هر عنصر <input> فعال را انتخاب می کند
:first-child p:first-child هر عنصر <p> که اولین عضو از عنصر والد خود باشد را انتخاب می کند
::first-letter p::first-letter اولین حرف از عنصر <p> را انتخاب می کند
::first-line p::first-line اولین خط از هر عنصر <p> را انتخاب می کند
:first-of-type p:first-of-type هر عنصر <p> که اولین عنصر از <p> از والد خود باشد را انتخاب می کند
:focus input:focus عناصر ورودی که مرورگر روی آنها متمرکز شده را انتخاب می کند
:hover a:hover پیوندی که اشاره گر ماوس روی آن قرار دارد را انتخاب می کند
:in-range input:in-range عنصر ورودی با مقدار در محدوده تعریف شده را انتخاب می کند
:invalid input:invalid همه عناصر ورودی با مقدار نامعتبر را انتخاب می کند
:lang(language) p:lang(fa) هر عنصر <p> که مقدار صفت lang برابر با “fa” باشد را انتخاب می کند(farsi)
:last-child p:last-child هر عنصر <p> که آخرین عضو والد خود باشد را انتخاب می کند
:last-of-type p:last-of-type هر عنصر <p> که آخرین عنصر <p> از والد خود باشد را انتخاب می کند
:link a:link همه پیوندهای مشاهده نشده توسط کاربر را را انتخاب می کند
:not(selector) :not(p) هر عنصر که عنصر <p> نباشد را انتخاب می کند
:nth-child(n) p:nth-child(2) هر عنصر <p> که دومین عنصر والد خود باشد را انتخاب می کند
:nth-last-child(n) p:nth-last-child(2) هر عنصر <p> که دومین عنصر از آخر والد خود باشد را انتخاب می کند
:nth-last-of-type(n) p:nth-last-of-type(2) هر عنصر <p> که دومین عنصر <p> از آخر والد خود باشد را انتخاب می کند
:nth-of-type(n) p:nth-of-type(2) هر عنصر <p> که دومین عنصر <p> والد خود باشد را انتخاب می کند
:only-of-type p:only-of-type هر عنصر <p> که تنها عنصر <p> والد خود باشد را انتخاب می کند
:only-child p:only-child هر عنصر <p> که تنها عنصر والد خود باشد را انتخاب می کند
:optional input:optional عناصر ورودی که صفت “required” تنظیم نشده باشد را انتخاب می کند
:out-of-range input:out-of-range عناصر ورودی با مقدار خارج از محدوده تعریف شده را انتخاب می کند
:read-only input:read-only عناصر ورودی با صفت “readonly” را انتخاب می کند
:read-write input:read-write عناصر ورودی که صفت “readonly” تنظیم نشده باشد را انتخاب می کند
:required input:required همه عناصر ورودی که صفت “required” آنها تنظیم شده باشد را انتخاب می کند
:root :root مسیر اصلی سند را انتخاب می کند
::selection ::selection قسمتی از عنصر را که توسط کاربر انتخاب شده باشد را انتخاب می کند
:target #news:target عنصر جاری و فعال #news را انتخاب می کند
:valid input:valid همه عناصر با مقدار معتبر را انتخاب می کند
:visited a:visited همه پیوندهای مشاهده شده توسط کاربر را انتخاب می کند

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *