درحال بارگذاری

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

تاریخ: دوشنبه, 24 شهریور 99

نویسنده: مهرداد نامور... بازیدها: 56 - نظرات : 0 دسته بندی: برنامه نویسی تحت وب


                   سلام به همراهان کلاس برتر ؛ با یک مطلب کاربردی دیگر در زمینه CSS همراه شما هستیم .


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

     در CSS انتخابگرها الگوهایی هستند که برای انتخاب عنصر (عناصر) موردنظر برای استایل دادن استفاده می شوند.

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

 

انتخابگر مثال توضیح مثال
.class .intro همه عناصر دارای کلاس = "intro" را انتخاب می کند
.class1.class2 .name1.name2 همه عناصر دارای مجموعه name1 و name2 را در ویژگی کلاس خود انتخاب می کند
.class1 .class2 .name1 .name2 همه عناصر دارای name2 را که از فرزندان عنصری با name1 است انتخاب می کند
#id #firstname عنصر را با id = "firstname" انتخاب می کند
* * همه عناصر را انتخاب می کند
element p همه عناصر <p> را انتخاب می کند
element.class p.intro همه عناصر <p> با کلاس = "intro" را انتخاب می کند
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] همه عناصر دارای ویژگی هدف را انتخاب می کند
[attribute=value] [target=_blank] همه عناصر دارای هدف = "_ خالی" را انتخاب می کند
[attribute~=value] [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*="w3schools"] هر عنصر <a> که مقدار ویژگی href شامل زیر رشته "w3schools" است را انتخاب می کند
:active a:active پیوند فعال را انتخاب می کند
::after p::after بعد از محتوای هر عنصر <p> چیزی وارد کنید
::before p::before قبل از محتوای هر عنصر <p> چیزی وارد کنید
:checked input:checked هر عنصر <ورودی> را انتخاب می کند
:default input:default عنصر پیش فرض <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 عناصر ورودی را با مقدار در یک محدوده مشخص شده انتخاب می کند
:indeterminate input:indeterminate عناصر ورودی را که در یک حالت نامشخص هستند انتخاب می کند
:invalid input:invalid همه عناصر ورودی را با مقدار نامعتبر انتخاب می کند
:lang(language) p:lang(it) هر عنصر <p> را با ویژگی زبان برابر با "it" (ایتالیایی) انتخاب می کند
: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 عناصر ورودی را بدون ویژگی "مورد نیاز" انتخاب می کند
:out-of-range input:out-of-range عناصر ورودی را با مقداری خارج از محدوده مشخص شده انتخاب می کند
::placeholder input::placeholder عناصر ورودی را با مشخصه "مکان نگهدار" مشخص شده انتخاب می کند
:read-only input:read-only عناصر ورودی را با مشخصه "فقط خواندنی" مشخص شده انتخاب می کند
:read-write input:read-write عناصر ورودی را با ویژگی "فقط خواندنی" مشخص نشده انتخاب می کند
:required input:required عناصر ورودی را با مشخصه "مورد نیاز" مشخص می کند
:root :root عنصر اصلی سند را انتخاب می کند
::selection ::selection بخشی از عنصری را که توسط کاربر انتخاب شده است انتخاب می کند
:target #news:target عنصر فعلی # خبر را انتخاب می کند (روی URL حاوی آن نام لنگر کلیک کنید)
:valid input:valid همه عناصر ورودی را با مقدار معتبر انتخاب می کند
:visited a:visited همه پیوندهای بازدید شده را انتخاب می کند

 

امیدوارم با انتشار این مطلب تونسته باشیم به شما کمک کنیم ؛ موفق باشید.

 


نویسنده: مهرداد نامور... بازیدها: 56 - نظرات : 0 دسته بندی: برنامه نویسی تحت وب

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

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