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

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

()lang:

()lang یک pseudo-class می باشد که برای انتخاب و استایل دهی به عنصری که دارای زبانی خاص است, می باشد. تکه کد زیر را در نظر بگیرید: .element:lang(X) { color: blue; } در اینجا اگر عنصری که کلاس element دارد به زبان X باشد رنگ متن آن آبی خواهد شد. در HTML زبان از ترکیب […]

last-child:

last-child یک pseudo-class می باشد که عنصری که آخرین فرزند یک عنصر دیگر است را انتخاب می کند. فرض کنید HTML به صورت زیر است: <article> <p></p> <p></p> <p></p> <p>فرزند آخر عنصر مقاله</p> </article> در اینجا آخرین عنصر پاراگراف (تگ p) آخرین فرزند عنصر article می باشد. پس استایل زیر بر روی آن اعمال می […]

last-of-type:

last-of-type یک pseudo-class می باشد که از هر نوع خاص عناصر در یک سطح, آخرین آن را انتخاب می کند. یعنی اگر مثلا در یک سطح یک عنوان و پنج پاراگراف و دو عنصر تصویر داشته باشیم می توان با استفاده از این انتخابگر از هر کدام از این نوع عناصر آخرینشان را انتخاب کرد. […]

()nth-child:

()nth-child: یک pseudo-class می باشد که به ما این امکان را می دهد تا فرزندان یک عنصر را بر اساس ترتیبشان انتخاب کنیم. این انتخابگر یک مقدار مثبت به عنوان آرگومان می پذیرید و بر اساس آن عدد, عنصر مربوطه را انتخاب می کند. به عنوان مثال در زیر چهارمین آیتم یک لیست انتخاب و […]

()nth-of-type:

()nth-of-type: یک pseudo-class می باشد که به ما این امکان را می دهد تا عناصری از یک نوع خاص که در درون یک نگهدارنده هستند را بر اساس ترتیبشان انتخاب کنیم. این انتخابگر شبیه به ()nth-child: می باشد با این تفاوت که شمارش بر روی تمام فرزندان یک سطر صورت نمی گیرد بلکه فقط بر […]

only-child:

only-child: یک pseudo-class است و عنصری که تنها فرزند باشد را انتخاب می کند. خطوط HTML زیر را در نظر بگیرید, در اینجا p:only-child باعث انتخاب پارگراف می شود چون عنصر p تنها فرزند نگهدارنده خود یعنی article هست. <article> <p>عنصر پاراگراف</p> <!– انتخاب می شود –> </article> اما در خطوط زیر عنصر پاراگراف تنها […]

invalid:

invalid یک pseudo-class می باشد که برای انتخاب و استایل دهی به عنصر input در یک فرم, زمانی که آن عنصر با توجه به نوع مشخص شده (type) مقدار نادرست گرفته باشد. عنصر زیر را در نظر بگیرید: <input type=”number” /> مقدار عنصر input باید از نوع عدد باشد پس اگر آن را با حروف […]

valid:

valid یک pseudo-class می باشد که برای انتخاب و استایل دهی به عنصر input در یک فرم, زمانی که آن عنصر با توجه به نوع مشخص شده (type) مقدار صحیح و معتبر گرفته باشد. عنصر زیر را در نظر بگیرید: <input type=”number” /> مقدار عنصر input باید از نوع عدد باشد تا در وضعیت valid […]

link:

link یک pseudo-class می باشد که برای انتخاب و استایل دهی به عناصر لینک در صفحه استفاده می شود. نکته قابل توجه اینکه فقط لینک هایی (<a>) را انتخاب می کند که دارای ویژگی href هستند. خطوط HTML زیر را در نظر بگیرید: <!– لینک های زیر انتخاب می شوند –> <a href=”#”>Random Link</a> <a […]