در زمان طراحی, نوشتن انتخابگرها یکی از کارهایی است که دائما در حال انجام آن هستیم. در این مطلب نحوه تجزیه این انتخابگرها توسط مرورگرها بیان شده است و همچنین توصیه هایی در مورد نوشتن انتخابگرهایی با کارایی بیشتر نیز آورده شده است.
()not:
:not() یک pseudo-class نقیض می باشد که انتخابگری را به عنوان آرگومان می گیرد و نقیض آن انتخابگر را انتخاب می کند. به وسیله این انتخابگر می توان در بین موارد انتخابی استثنا به وجود آورد. تکه کد زیر تمام آیتم های لیست را انتخاب می کند و به رنگ سبز در می آورد به […]
root:
root: یک pseudo-class می باشد که برای انتخاب عنصر ریشه (root) سند HTML استفاده می شود. عنصر ریشه عنصری است که فرزند عنصر دیگری نباشد. در HTML4 این عنصر <html> می باشد که در بالاترین سطح اجدادی قرار دارد! انتخابگر root: معادل انتخابگر html است با این تفاوت که سطح تشخیص (specificity) بالاتری دارد. این […]
()lang:
()lang یک pseudo-class می باشد که برای انتخاب و استایل دهی به عنصری که دارای زبانی خاص است, می باشد. تکه کد زیر را در نظر بگیرید: .element:lang(X) { color: blue; } در اینجا اگر عنصری که کلاس element دارد به زبان X باشد رنگ متن آن آبی خواهد شد. در HTML زبان از ترکیب […]
indeterminate:
indeterminate یک pseudo-class می باشد که برای انتخاب و استایل دهی به عناصری مثل checkbox, radio, progress که در وضعیت نامعلوم قرار دارند, استفاده می شود. مثلا checkbox و radio می توانند در وضعیت تیک خورده (checked) یا تیک نخورده (unchecked) باشند اما گاهی در هیچکدام از این دو وضعیت نیستند به این وضعیت, وضعیت […]
first-child:
first-child یک pseudo-class می باشد که عنصری که اولین فرزند یک عنصر دیگر است را انتخاب می کند. فرض کنید HTML به صورت زیر است: <article> <p>فرزند اول عنصر مقاله</p> <p>فرزند دوم</p> <p></p> <p></p> <p></p> </article> در اینجا اولین عنصر پاراگراف (تگ p) اولین فرزند عنصر article می باشد. پس استایل زیر بر روی آن […]
last-child:
last-child یک pseudo-class می باشد که عنصری که آخرین فرزند یک عنصر دیگر است را انتخاب می کند. فرض کنید HTML به صورت زیر است: <article> <p></p> <p></p> <p></p> <p>فرزند آخر عنصر مقاله</p> </article> در اینجا آخرین عنصر پاراگراف (تگ p) آخرین فرزند عنصر article می باشد. پس استایل زیر بر روی آن اعمال می […]
first-of-type:
first-of-type یک pseudo-class می باشد که از هر نوع خاص عناصر در یک سطح اولین آن را انتخاب می کند. یعنی اگر مثلا در یک سطح یک عنوان و پنج پاراگراف و دو عنصر تصویر داشته باشیم می توان با استفاده از این انتخابگر از هر کدام از این نوع عناصر اولینشان را انتخاب کرد. […]
last-of-type:
last-of-type یک pseudo-class می باشد که از هر نوع خاص عناصر در یک سطح, آخرین آن را انتخاب می کند. یعنی اگر مثلا در یک سطح یک عنوان و پنج پاراگراف و دو عنصر تصویر داشته باشیم می توان با استفاده از این انتخابگر از هر کدام از این نوع عناصر آخرینشان را انتخاب کرد. […]
()nth-child:
()nth-child: یک pseudo-class می باشد که به ما این امکان را می دهد تا فرزندان یک عنصر را بر اساس ترتیبشان انتخاب کنیم. این انتخابگر یک مقدار مثبت به عنوان آرگومان می پذیرید و بر اساس آن عدد, عنصر مربوطه را انتخاب می کند. به عنوان مثال در زیر چهارمین آیتم یک لیست انتخاب و […]