نکته : انتخابگر ها در Css

با سلام

گفتم امروز بیام و یه مطلب که میتونه براتون خیلی مفید باشه رو به اشتراک بزارم .

اکثر دوستانی که طراحی رو شروع میکنند در طراحی با Css بیشتر اوقات از انتخابگر های ساده ایی مثل انتخاب کلاس یا آیدی اون شی یا در نهایت انتخاب خود شی ( با قرار دادن نام خود تگ ) استفاده میکنند .

ولی اگر بخوایم انتخابمون رو بیشتر شخصی سازی کنیم و نخوایم که روی هر شی ایی آیدی و کلاس بزاریم و البته اگر بخوایم هم از اسم تگ ها استفاده کنیم ممکنه قاطی بشه .

پس این نوع از انتخاب گر ها میتونه راه چاره شما باشه . شما حتما روی اشیاتون یکسری آپشن و اسم یا همون پارامتر های خاص قرار میدید ، مثل تگ زیر :

<input type="text" name="txt1" placeholder="This is test" />

( شرمنده اینجا کد ها درست نمایش داده نمیشه کپی کنید توی نوت پد درست میشه شکلش )

خوب این تگ input یه آپشن type داره که text هست و یه آپشن name داره که txt1 هست و یه آپشن placeholder که This is test هست . ما به صورت زیر میتونیم این شی را با استفاده از این آپشن ها انتخاب کنیم :

input[type=text]{
background:#eee;
}
یا
input[name=txt1]{
background:#ddd;
}
یا
input[placeholder=This is test]{
background:#333;
}

یا حتی میتونید یه تگ لینک رو به این صورت صدا بزنید a[href="logout.php"]m .

بعضی اوقات هم ممکنه از یک شی چندین بار تکرار کرده باشید . مثلا از تگ های لیست <li> چند بار ساخته باشید . ولی هیچ نوع آپشنی بهش نداده باشید . مثل زیر :

<ul>
    <li>t1</li>
    <li>t2</li>
    <li>t3</li>
    <li>t4</li>
    <li>t5</li>
    <li>t6</li>
    <li>t7</li>
</ul>

خوب حاال چیکار کنیم ؟ برای مثال میخوایم اون تگ <li> سومی رو انتخاب کنیم ، میتونیم به این صورت انتخابش کنیم :

i:nth-child(3){
background:#e3e3e3;
}

یا مثلا میخواید آخرین تگ رو انتخاب کنید ولی نمیدونید چندمی هست ، میتونید اینطوری استفاده کنید :

i:last-child{
background:#ccc;
}

خیلی دیگه از انتخاب گر ها هست که خارج از حوصله من   و خارج از حوصله شما خواهد بود   ولی شما میتونید همه ی انتخاب گر های css رو در  این لینک به صورت کامل ببینید :

http://www.w3schools.com/cssref/css_selectors.asp

امیدوارم که این آموزش به شما کمکی در بالا بردن سطح دانش شما در طراحی وب کرده باشه .

با تشکر

Kaz3m/.