شروع کار با انتخابگرها

انتخابگرها یکی از مهمترین و قدرتمندترین قسمت های CSS هستند. یک انتخابگر الگویی است که به ما اجازه می دهد تا از طریق آن عناصر HTML را انتخاب کنیم تا بتوانیم استایل بر روی آن عناصر اعمال کنیم. به بیان دیگر از طریق انتخابگرها می توانیم عناصر HTML را برای استایل دهی هدف قرار دهیم. […]

()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 می باشد که به ما این امکان را می دهد تا فرزندان یک عنصر را بر اساس ترتیبشان انتخاب کنیم. این انتخابگر یک مقدار مثبت به عنوان آرگومان می پذیرید و بر اساس آن عدد, عنصر مربوطه را انتخاب می کند. به عنوان مثال در زیر چهارمین آیتم یک لیست انتخاب و […]