Google Chrome
Smashing Magazine
Mozilla Developer Network
CSS-Tricks
آموزش استفاده از Selectorهای CSS
۲۷ اسفند ۱۳۸۸ ساعت ۱۲:۲۵
طراحی وب
معرفی Selectorهای CSS و کار با مهمترین هاشون
Selector یا انتخابگرهای CSS، فرمتهایی برای دسترسی بیشتر به اجزای صفحه است. برای نمونه،انتخابگر زیر:
div:first-child[id*=some] span.someClass + p ,
.someClass#someID {
color: red;
}
برای اولین P بعد از یک SPAN با کلاس someClass که زیرمجموعه یک DIV باشه DIVای که اولین عضو زیرمجموعه خودش باشه و مقدار مشخصه ID اون کلمه some توش باشه، به اضافه Element با ID برابر someID و class برابر someClass اعمال میشه.یعنی در کد زیر، P 3 و SPAN 2 و SPAN 4 قرمز میشه.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div:first-child[id*=some] span.someClass + p ,
.someClass#someID {
color: red;
}
</style>
</head>
<body>
<div id="someDiv">
DIV 1
<p>P 1</p>
<p>P 2</p>
<div>DIV 2</div>
<span class="someClass">SPAN 1</span>
<p>P 3</p>
<span id="someID" class="someClass">SPAN 2</span>
</div>
<div id="someDiv">
DIV 3
<p>P 4</p>
<p>P 5</p>
<div>DIV 4</div>
<span class="someClass">SPAN 3</span>
<p>P 6</p>
<span id="someID" class="someClass">SPAN 4</span>
</div>
<p>P 7</p>
<div>
DIV 5
<p>P 8</p>
</div>
</body>
</html>
میخوایم این انتخابگرها رو دونه دونه از ساده به پیچیده با مثال توضیح بدیم. برای مطالعه مرجع کامل و معتبر به Selectors Level 3 مراجعه کنید.
در حالت تکی، این Selector می تونه
- علامت * باشه. این علامت یعنی انتخاب همه Elementهای موجود (CSS 2).
- نام یک Tag بصورت ساده باشه (CSS 1).
- نام class باشه که با نقطه شروع میشه (CSS 1).
- نام id باشه که با علامت # شروع میشه (CSS 1).
* { padding:0; }
input { border:1px solid #323232; }
span { display:block; }
.someClass { margin:10px; }
#someID { color:pink; }
کد بالا رو تگهای زیر اعمال میشه:
<input type="text" name="someName1" /> <input type="checkbox" name="someName2" /> <span>SPAN 1</span> <div class="someClass">SPAN 1</div> <table id="someID"></table>اولین خط، همه تگهای INPUT در صفحه رو پیدا می کنه. خط دوم همه SPAN ها رو. خط سوم همه کلاسهای someClass و خط چهارم همه IDهای someID.
یه توضیح کوچیک درباره فرق id با class بدم. بطور استاندارد، id نباید در صفحه تکراری باشه ولی class می تونه. یعنی نمی تونیم دو تا Element با id یکسان در صفحه داشته باشیم. اگر به اشتباه یا هر دلیل دیگه ای، از id بیشتر از یکبار استفاده کردیم، از استاندارد خارج شدیم و نباید مثلا مورد دومی style بگیره ولی مرورگرها، هوشمند عمل می کنند و تاثیری در نمایش و اجرای صفحه بوجود نمیاد. در کل معمولا از id برای بخشهای خاص صفحه که قرار نیست تکرار بشه استفاده می کنند و از class برای بخشهای قابل تکرار. یعنی مثلا من یه سری کد CSS میبینم، وقتی دارم در صفحه استفاده می کنم، می دونم اونایی که class هستند، رو میشه جاهای مختلفی استفاده کرد ولی اونایی که id هستند رو فقط یکجا میشه قرار داد. مثلا معمولا header صفحه چون مدلش طوریه که نمیشه چند بار در صفحه قرار داد، با id مشخص می کنند که بگویند نمیشه مثلا پایین صفحه هم header بذاری چون فقط اون بالا جواب میده.
حالت دوم اینه که بخوایم اونهایی رو انتخاب کنیم که خودشون id یا class خاصی رو دارند (CSS 1). برای این کار باید انتخابگر id یا class رو به انتخابگر مرجع متصل کرد:
input.someClass { border:1px solid #323232; }
span.someClass { border:1px solid #323232; }
div#someID { border:1px solid #323232; }
#someID.someClass { padding:0; }
.someClass#someID { padding:0; }
خط اول یعنی همه تگهای INPUT با class برابر someClass. خط آخر یعنی همه کلاس someClass که خودشون id برابر someID داشته باشند (که قاعدتا باید یکی باشه).
<input class="someClass" type="text" name="someName1" /> <span class="someClass">SPAN 1</span> <div id="someID">DIV 1</div> <div id="someID" class="someClass">DIV 2</div>
می تونیم چند تا Selector رو همزمان استفاده کنیم. برای این کار باید اونها با کاما از هم جدا کنیم:
input.someClass , span.someClass , img {
border:1px solid #323232;
}
input.someClass1,
span.someClass2,
img,
#someID,
div.someClass3 {
padding:2px;
}
یک نکته درباره استفاده چندتایی انتخابگرها. اگر انتخابگری رو غلط بنویسیم مثلا بجای (someID# بنویسیم someID##)، اون انتخابگر کلا رد میشه و Styleهاش اجرا نمیشن. اگر در استفاده چندتایی، یکیشون غلط باشه، بقیه هم اجرا نمیشن:
#someID {
color: blue;
}
##someID {
color: red;
}
اینجا اولی اجرا میشه و رنگ نوشته ها رو آبی می کنه ولی دومی بخاطر اینکه غلطه، اجرا نمیشه و رنگ نوشته ها، آبی باقی می مونه. و اینجا:
.someClass , #someID , #someOtherID {
color: blue;
}
.someClass , ##someID , #someOtherID {
color: red;
}
رنگ نوشته هایی که class برابر someClass دارند یا id برابر someID یا someOtherID دارند آبی میشه ولی بخاطر اشتباه در بخش دوم، کلش رد میشه و رنگ هیچ کدوم تغییر نمی کنه.
و اما حالتهای سلسه مراتبی. سه نوع حالت سلسله مراتبی داریم:
- Element زیرمجموعه یا Child یک Element دیگه است.
- Element بالادستی یا Parent یک Element دیگه است.
- Element هم مرتبه یا Sibling یک Element دیگه اشت.
<div id="parent"> <p id="firstP">I'm Child of #parent & Sibling of #secondP.</p> <p id="secondP">I'm Child of #parent & Sibling of #firstP.</p> <p id="thirdP"> <span>I'm Child of #thirdP & #parent.</span> </p> </div>
در CSS به چهار نوع سلسله مراتب می تونیم دسترسی داشته باشیم:
- انتخاب Elementهایی که زیرمجموعه Element دیگه ای باشند (CSS 1). مثل انتخاب Pها و SPAN در نمونه بالا که زیرمجموعه parent# هستند. انتخابگرهای این نوع، با فاصله از هم جدا میشوند.
- انتخاب Elementهایی که مستقیما زیرمجموعه Element دیگه ای باشند (CSS 2). مثل انتخاب Pها که مستقیما زیرمجموعه parent# هستند ولی SPAN زیرمجموعه مستقیم parent# نیست (در مثال بالا). انتخابگرهای این نوع، با علامت < از هم جدا میشوند.
- انتخاب Elementهایی که دقیقا بعد از Element دیگه ای باشند (CSS 2). مثل secondP# که مستقیما بعد از firstP# قرار گرفته(در مثال بالا). انتخابگرهای این نوع، با علامت + از هم جدا میشوند.
- انتخاب Elementهایی که در همون مرتبه، بعد از Element دیگه ای باشند (CSS 3). مثل هر سه P مثال بالا که در یک رده هستند (نه زیرمجموعه هم هستند و نه بالادستی). انتخابگرهای این نوع، با علامت~ از هم جدا میشوند.
#parent span { color:red; }
#thirdP > span { color:red; }
#firstP + #secondP { color:red; }
#firstP ~ #thirdP { color:red; }
باید دقت بشه که ما همیشه داریم آخرین عبارت رو پیدا می کنیم یعنی در خط آخر، فقط رنگ thirdP# عوض میشه.
امکاناتی برای جستجو براساس مشخصه ها (Attributes) هم وجود داره. مثلا انتخاب INPUTای که مشخصه type اون برابر checkbox باشه. به مثال زیر توجه کن:
<input type="text" name="email" dir="rtl" /> <input type="text" name="website" /> <p class="someClass1 someClass2 someClass3"></p> <p class="sOmEClass"></p> <p class="someCLaSs"></p> <p class="someOtherClass"></p> <a hreflang="fa-IR" href="http://ایران.بوپلو">Boplo.ir</a>این بخش شامل مدلهای زیر است:
- Elementهایی که مشخصه خاصی رو داشته باشند (CSS 2). مثل خط اول که مشخه dir رو داره (با هر مقداری).
- Elementهایی که مشخصه خاصی از اونها برابر مقداری باشه (CSS 2). مثل خط دوم که مشخصه nameاش برابر عبارت "website" است.
- Elementهایی که مشخصه خاصی از اونها برابر یکی از مقادیر لیستی است که اجزای لیست، با فاصله از هم جدا شدند (CSS 2). مثل خط سوم که مشخصه classاش شامل یک لیست با فاصله جدا شده است.
- Elementهایی که مشخصه خاصی از اونها با مقداری خاص شروع بشه (CSS 3). مثل خط چهارم که مشخصه class اون با کلمه "sOmE" شروع شده.
- Elementهایی که مشخصه خاصی از اونها با مقداری خاص تموم بشه (CSS 3). مثل خط چهارم که مشخصه class اون با کلمه "CLaSs" تموم شده.
- Elementهایی که مشخصه خاصی از اونها با حاوی مقداری خاص باشه (CSS 3). مثل خط پنجم که مشخصه class اون، حاوی کلمه "Other" است.
- Elementهایی که مشخصه خاصی از اونها برابر یکی از مقادیر لیستی است که اجزای لیست، با علامت "-" از هم جدا شدند (CSS 2). مثل خط ششم که مشخصه hreflangاش شامل یک لیست با علامت "-" جدا شده است.
input[dir] { border: 1px solid #555; }
input[name="website"] { border: 1px solid #555; }
p[class~="someClass2"] { border: 1px solid #555; }
p[class^="sOmE"] { border: 1px solid #555; }
p[class$="CLaSs"] { border: 1px solid #555; }
p[class*="Other"] { border: 1px solid #555; }
p[hreflang|="fa"] { border: 1px solid #555; }
و اگر بخوایم چند تا از این Selector رو همزمان استفاده کنیم، باید بدون فاصله بعد از هم بیاریم:
input[dir][type="text"][name^="web"] { border: 1px solid #555; }
روش دیگه پیدا کردن Elementها، استفاده از Pseudo-classes هاست. این انتخابگرها، عباراتی هستند که توسط علامت ":" به Selectorها متصل میشوند و نتایج رو محدود می کنند و می تونند پشت سر هم چند بار استفاده بشوند. معروفترینش می تونه hover: باشه که معمولا برای لینکها تعریف میشه:
a:hover { text-decoration:underline; }
تعدادشون زیاده ولی من مهمترین هاش رو معرفی می کنم:
first-child: : انتخاب Element با این شرط که اولین عضو زیرمجموعه ی خودش باشه (CSS 2).
last-child: : انتخاب Element با این شرط که آخرین عضو زیرمجموعه ی خودش باشه (CSS 3).
only-child: : انتخاب Element با این شرط که تنها عضو زیرمجموعه ی خودش باشه (CSS 3).
<div> <p>I am first child of my parent and i am BLUE.</p> <div> <span>I am only child of my parent & i'm RED.</span> </div> <p>I am last child of my parent and i am GREEN.</p> </div>
p:first-child { color: blue; }
span:only-child { color: red; }
p:last-child { color: green; }
first-of-type: : انتخاب Element با این شرط که اولین عضو زیرمجموعه ی خودش و از نوع انتخابگر مشخص شده باشه (CSS 3).
last-of-type: : انتخاب Element با این شرط که آخرین عضو زیرمجموعه ی خودش و از نوع انتخابگر مشخص شده باشه (CSS 3).
only-of-type: : اانتخاب Element با این شرط که تنها عضو زیرمجموعه ی خودش و از نوع انتخابگر مشخص شده باشه (CSS 3).
<div> <div>I am first child of my parent.</div> <p>I am first P of my parent and i am BLUE.</p> <div> <span>I am only child of my parent & i'm GREEN.</span> </div> <p>I am last P of my parent and i am RED.</p> <div>I am last child of my parent.</div> </div>
p:first-of-type { color: blue; }
p:last-of-type { color: red; }
span:only-of-type { color: green; }
link: : انتخاب لینکهایی که هنوز مشاهده نشده اند (CSS 1).
visited: : انتخاب لینکهایی که مشاهده شده اند (CSS 1).
hover: : انتخاب Elementهایی که نشانگر ماوس روشون قرار داره (CSS 1).
active: : انتخاب Elementهایی که در حال کلیک شدند هستند. این Style برای فاصله زمانی فشار دادن دکمه ماوس و رها کردنش اعمال میشه (CSS 1).
focus: : انتخاب Elementهایی توسط ماوس یا کیبورد فعال هستند (CSS 1).
<a href="http://boplo.ir">Boplo.ir</a> <input type="text" />
a:link { color: blue; }
a:visited { color: purple; }
a:hover { text-decoration: none; }
a:active { color: black; }
input:focus { border:1px solid #444; }
enabled: : انتخاب Elementهای فعال و قابل استفاده (CSS 3).
disabled: : انتخاب Elementهای غیرفعال و غیرقابل استفاده (CSS 3).
<input type="text" name="email" /> <input type="text" disabled="disabled" name="website" />
input:enabled { border:1px solid #444; }
input:disabled { font-style: italic; }
(nth-child(n: : انتخاب Elementها زیرمجموعه براساس فرمول عددی an+b. به همراه کلمات odd و even برای به ترتیب انتخاب زیرمجموعه های فرد و زوج (CSS 3).
p:nth-child(2n+5) { color: red; }
با قرار دادن عدد از یک، شماره Element مورد نظر بدست میاد:n=1 => 2(1)+5 = 7
n=2 => 2(2)+5 = 9
n=3 => 2(3)+5 = 11
یعنی اگر حداقل 11 تا P داشته باشیم. رنگ Pهای هفتم، نهم و یازدهم قرمز میشه.
p:nth-child(10) { color: red; }
p:nth-child(0n+10) { color: red; }
هر دو مورد بالا برابر هستند و به دهمین P اشاره دارند.p:nth(2n) { color: red; }
p:nth(even) { color: red; }
هر دو مورد بالا برابر هستند و به Pهای زوج اشاره دارند.p:nth(2n+1) { color: red; }
p:nth(odd) { color: red; }
هر دو مورد بالا برابر هستند و به Pهای فرد اشاره دارند.نمونه های صحیح:
:nth-child( 3n + 1 ) :nth-child( +3n - 2 ) :nth-child( -n+ 6) :nth-child( +6 )نمونه های غلط:
:nth-child(3 n) :nth-child(+ 2n) :nth-child(+ 2)(nth-last-child(n: : مشابه (nth-child(n: ولی شمارش رو از انتها آغاز می کنه (CSS 3).
مشابه این دو نمونه بالا، nth-of-type: و nth-last-of-type: هم داریم (CSS 3).
empty: : انتخاب Elementای که هیچ زیرمجموعه نداره (CSS 3).
(not(s: : بجای s یک انتخابگر دیگه قرار میگیره و Elementهایی رو پیدا می کنه در انتخابگر s صدق نمی کنند (CSS 3).
p:not(.someClass) { color: red; }
a:not(:hover) { color: red; }
*:not(span) { color: black; }
این نمونه رو نمیشه تو در تو استفاده کرد یعنی این غلطه:
p:not(:not(.someClass)) { color: red; }
حالا می تونیم نمونه اول پست رو راحت تحلیل کنیم:
div:first-child[id*=some] span.someClass + p ,
.someClass#someID {
color: red;
}
ما اینجا دو تا Selector داریم که با کاما از هم جدا شده و اینجوری می تونیم جداشون کنیم:
div:first-child[id*=some] span.someClass + p {
color: red;
}
.someClass#someID {
color: red;
}
در کد اول، ما تگهای DIV که اولین زیرمجموعه Element بالادستی خودشون باشند رو انتخاب می کنیم. توسط انتخابگر Attributes شرط تعیین می کنیم که مشخصه id برای Element پیدا شده باید شامل کلمه some باشه. وقتی Element پیدا شد، حالا با یک فاصله Selector دیگه ای داریم. این فاصله یعنی انتخابگر دوم باید زیرمجموعه انتخابگر اول باشه. انتخابگر دوم تگ SPAN است که دارای کلاس CSS با نام someClass باشه و زیرمجموعه Element پیدا شده از انتخابگر قبلی باشه. وقتی این SPAN پیدا شد با علامت + ما تگ P رو که دقیقا بعد از اون SPAN باشه رو می خوایم.
و در انتخابگر دوم هم هر Elementای با مقدار id برابر someID و مقدار class برابر someClass رو پیدا می کنیم.
سلب مسئولیت
CSS نسخه بندی داره و مرورگرها هم پشتیبانی متفاوتی از نسخه هاش دارند. در تاریخ نگارش این پست، جدیدترین نسخه 3 است که تقریبا هیچ مرورگری پشتیبانی کامل ازش نمی کنه. بهترین پشتیبانی رو فعلا نسخه های جدید گوگل کروم و فایرفاکس ازش دارند و بدترین پشتیبانی رو، اینترنت اکسپلورر. انتخابگرهایی که اینجا معرفی میشن، معمولترین و پرکاربردترین اونهاست و تضمینی به اجراشون در همه جا نیست. این وظیفه شماست که کارایی اش رو چک کنید.
تو چی فکر می کنی؟