لیست کامل انتخابگرهای CSS + توضیح و مثال

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با لیست کامل انتخابگرهای CSS + توضیح و مثال با من همراه باشید.

لیست کامل انتخابگرهای CSS + توضیح و مثال

Free-Learn

لیست کامل انتخابگرهای CSS

برای مشاهده مثال هر یک از انتخابگرها، از ستون [ مثال ] بروی موارد موجود کلیک نمایید.

انتخابگر مثال توضیح
element p تمامی تگ های p را در صفحه انتخاب میکند
element.class p.test تگ p که کلاس test دارد را انتخاب میکند
element,element p,h2 انتخاب دسته جمعی تگ ها ( با کاما از همدیگه جدا میشن )
element element div p انتخاب تگ های p که درون تگ div می باشند
element>element div>p تمامی تگ های p که پدر هستند از داخل تگ div انتخاب میکند
element+element div+p تمامی تگ های p که بلافاصله بعد از تگ div اومده باشن
element1~element2 div~p تمامی تگ های p که بعد از تگ div اومده باشن
(مهم نیست بلافاصله باشه)
[attribute] [title] انتخاب مستقیم صفت title
[attribute=value] [“title=”test] انتخاب صفت هایی که مقدارشون test هست
[attribute~=value] [“title~=“test] صفت هایی که شامل یک کلمه خاص هستند ، باید کلمه خودش تنها باشد
و هیچگونه کلمه دیگری قبل یا بعدش بهش چسبیده نباشد
[attribute|=value] [“title|=”test] صفت هایی که با یک کلمه خاصی شروع شوند
باید کلمه خودش تنها باشد یا از طریق خط پیوند (-)
به کلمه دیگری چسبیده شده باشد
[attribute^=value] [“title^=”test] صفت هایی که با یک کلمه خاصی شروع شوند
مهم نیست چسبیده باشه یا نه
[attribute$=value] [“title$=”test] صفت هایی که با یک کلمه خاصی به پایان برسند، مهم نیست به کلمه قبل یا بعدش چسبیده باشد یا حتی با کاراکترهای – یا _ از هم جدا شده باشند
[attribute*=value] [“title*=”test] همینکه خوده کلمه خاص ما داخل صفت باشه انتخابش میکنه و براش مهم نیست اول باشه یا آخر یا با استفاده از – یا _ به کلمه دیگری چسبیده باشه
class_name. test. تمامی کلاس های test موجود در صفحه را انتخاب میکند
id_name# test# تمامی عناصر که دارای شناسه test می باشند را انتخاب میکند
* * تمامی تگ ها (عناصر) درون صفحه را انتخاب میکند

Free-Learn

لیست کامل شبه کلاس های CSS

شبه کلاس توضیح مثال
active: لحظه کلیک بروی یک عنصر ( لینک یا دیگر عناصر ) را مشخص میکند مثال
 focus: لحظه فوکوس ( کلیک کردن ) شدن بروی یک عنصر را مشخص میکند مثال
hover: وقتی ماوس میره روی یک عنصر مثال
link: انتخاب لینک هایی که هنوز روشون کلیک نشده ( بازدید نشده ) مثال
visited: انتخاب لینک هایی که روشون کلیک شده ( بازدید شده ) مثال
checked: انتخاب عناصری که تیک خورده اند ( یا قراره توسط کاربر تیک بخورند ) مثال
default: انتخاب عناصری که دارای مقدار پیش فرض می باشند مثال
disabled: انتخاب عناصری که غیرفعال می باشند مثال
enabled: انتخاب عناصری که فعال می باشند مثال
empty: انتخاب عناصری که هیچ فرزندی ( یا هیچ محتوایی ) ندارند مثال
first-child: انتخاب اولین فرزند از عناصر پدر ( ترتیب قرارگیری عناصر مهم هست ) مثال
last-child: انتخاب آخرین فرزند از عناصر پدر ( ترتیب قرارگیری عناصر مهم هست ) مثال
first-of-type: انتخاب اولین فرزند از یک نوع خاص ( ترتیب قرارگیری عناصر مهم نیست ) مثال
last-of-type: انتخاب آخرین فرزند از یک نوع خاص ( ترتیب قرارگیری عناصر مهم نیست ) مثال
nth-child(n): انتخاب اولین فرزند nام از عناصر پدر ( ترتیب قرارگیری عناصر مهم هست ) مثال
nth-last-child(n): انتخاب آخرین فرزند nام از عناصر پدر ( ترتیب قرارگیری عناصر مهم هست ) مثال
nth-of-type(n): انتخاب اولین فرزند nام از یک نوع خاص ( ترتیب قرارگیری عناصر مهم نیست ) مثال
nth-last-of-type(n): انتخاب آخرین فرزند nام از یک نوع خاص ( ترتیب قرارگیری عناصر مهم نیست ) مثال
only-of-type: انتخاب عناصر تک فرزند از یک نوع خاص مثال
only-child: انتخاب عناصری که تک فرزند می باشند مثال
()not: انتخاب نکن عنصر ( تگ ، کلاس ، ID ) که در داخل پرانتز می باشند مثال
optional: انتخاب عناصری که تکمیل کردنشان اختیاری می باشد مثال
required: انتخاب عناصری که تکمیل کردنشان اجباری می باشد مثال
in-range: انتخاب عناصری که در داخل یک محدوده ( رِنج ) مشخصی هستند مثال
out-of-range: انتخاب عناصری که خارج از یک محدوده ( رِنج ) مشخصی هستند مثال
invalid: انتخاب عناصری که دارای مقدار نامعتبر می باشند مثال
valid: انتخاب عناصری که دارای مقدار معتبر می باشند مثال
read-only: انتخاب عناصری که فقط خواندنی هستند مثال
read-write: انتخاب عناصری که فقط خواندنی نیستند مثال
root: انتخاب ریشه ( تمامی ) عناصر موجود در صفحه مثال
target: انتخاب لنگر ( Anchor ) فعال در صفحه مثال
indeterminate: انتخاب وضعیت ( اینکه انتخاب شدن یا نه ) عناصر مثال
lang(language_code): انتخاب عناصری که دارای صفت lang می باشند مثال

Free-Learn

لیست کامل شبه عناصر CSS

شبه عنصر توضیح مثال
after:: اضافه کردن محتوا به بعد از [ محتوای اصلی ] عنصر مثال
 before:: اضافه کردن محتوا به قبل از [ محتوای اصلی ] عنصر مثال
first-letter:: اولین حرف از متن یک عنصر را انتخاب میکند مثال
first-line:: اولین سطر ( لاین ) از متن یک عنصر را انتخاب میکند مثال
placeholder:: متن زمینه ای عناصر ورودی را انتخاب میکند مثال
selection:: بخشی از عنصر که توسط کاربران انتخاب میشود، را انتخاب میکند مثال

لیست کامل انتخابگرهای CSS + توضیح و مثال

Free-Learn

دریافت PDF یا پرینت این مطلب