این آموزش در تاریخ ۱۴۰۲/۰۲/۲۱ آپدیت شده است.
لیست کامل انتخابگرهای CSS + توضیح و مثال
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با لیست کامل انتخابگرهای CSS + توضیح و مثال با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
لیست کامل انتخابگرهای CSS
برای مشاهده مثال هر یک از انتخابگرها، از ستون [ مثال ] بروی موارد موجود کلیک نمایید.
| انتخابگر | مثال | توضیح |
|---|---|---|
| element | p | تمامی تگ های p را در صفحه انتخاب میکند |
| element.class | p.test | تگ p که کلاس test دارد را انتخاب میکند |
| element1,element2 | p,h2 | انتخاب دسته جمعی تگ ها ( با کاما از همدیگه جدا میشن ) |
| element1 element2 | div p | انتخاب تگ های p که درون تگ div می باشند |
| element1>element2 | div>p | تمامی تگ های p که پدر هستند از داخل تگ div انتخاب میکند |
| element1+element2 | 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(lang_code): | انتخاب تگ هایی که دارای صفت lang می باشند | مثال |
Free-Learn
لیست کامل شبه عناصر CSS
| شبه عنصر | توضیح | مثال |
|---|---|---|
| after:: | اضافه کردن محتوا به بعد از [ محتوای اصلی ] تگ | مثال |
| before:: | اضافه کردن محتوا به قبل از [ محتوای اصلی ] تگ | مثال |
| first-letter:: | اولین حرف / کاراکتر از متن یک تگ | مثال |
| first-line:: | اولین سطر ( خط ) از متن یک تگ | مثال |
| placeholder:: | متن زمینه ای Input ها | مثال |
| selection:: | اون متنی که توسط کاربر انتخاب میشه | مثال |
لیست کامل انتخابگرهای CSS + توضیح و مثال
