اگر دقت كرده باشيد، هر استايلي كه در CSS تعريف مي شود، از دو قسمت تشكيل شده است:

Selectors
Property

Selector ها مشخص مي كنند قانون نعريف شده بايد بر روي كدام تگها و المانهاي صفحه اعمال شود و Property در واقع خود قانون را مشخص مي كند. مثلا اگر ما بخواهيم با استفاده از CSS رنگ متن سرتيترهاي اول صفحه، H1، را به قرمز تغيير دهيم، بايد قانون CSS را به صورت زير تعريف كنيم:

h1{ color:red; }

در استايل فوق، Selector همان تگ h1 بوده و property كه مي خواهيم تغيير دهيم همان ويژگي color مي باشد. در اين قسمت مي خواهم شما را با انواع Selector هايي كه در CSS از آنها استفاده مي شود، آشنا كنم.

سلكتورهاي تگ – Tag Selectors:

ساده ترين حالتي كه يك Selector مي تواند داشته باشد، هماني است كه در مثال بالا ذكر شد. مثلا اگر شما بخواهيد قانوني را براي همه برچسبهاي <p> صفحه اعمال كنيد بايد ازسلكتورهاي تگ استفاده كنيد. كافيست اسم آن برچسب را بكار ببريد و سپس در داخل آكولادها، هر قانوني را كه دوست داريد تعريف كنيد. اين قوانين به همه برچسبهاي <p> كه در صفحه وجود دارند اعمال خواهند شد. در مثال زير اندازه فونت و رنگ متني كه در داخل برچسب <p> نمايش داده مي شود، تعريف شده است.

p{ 
font-size:1.3em;
color:#666;
}

اگر بخواهيم مجموعه اي از قوانين را بر روي چندين تگ HTML بطور همزمان اعمال كنيم، كافيست نام تگها را با كاما از همديگر جدا كنيم:

h1,h2,h3{
font-family:Tahoma;
color:#ff0000;
}

در مثال فوق نوع فونت و رنگ متن تگهاي H1, H2, H3 بطور يكجا تنظيم شده است.

سلكتورهاي كلاس –Class Selectors:

براي اينكه مفهوم سلكتورهاي Class را به خوبي درك كنيد، از يك مثال شروع مي كنيم. فرض كنيد ما مي خواهيم رنگ متن كليه پاراگرافهاي صفحه را به آبي تغيير دهيم، براي اين منظور كافيست از سلكتورهاي تگ استفاده كنيم:

p{ 
color:#0000FF;
}

حال فرض كنيد كه قسمتي از صفحه وب شما داراي پس زمينه آبي رنگ مي باشد. در اينحالت چون رنگ همه پاراگرافهاي صفحه به آبي تغيير داده شده است، متن پاراگرافي كه در اين قسمت واقع شده است به دليل يكسان بودن رنگ متن با رنگ پس زمينه، ديده نخواهد شد. براي حل مشكل بايد رنگ متن موجود در اين پاراگراف خاص تغيير كند مثلا به سفيد. اولين كاري كه به ذهنتان مي رسد اينست كه قانون قبلي را تغيير دهيد و لي اين كار باعث مي شود كه رنگ متن همه پاراگرافها عوض شود. براي حل اين مشكل از سلكتورهاي كلاس استفاده مي شود. بدين صورت كه ما يك كلاس تعريف كرده و قانون مورد نظر را (تغيير رنگ متن به سفيد) در داخل اين كلاس مشخص مي كنيم. انتخاب اسم كلاس كاملا اختياري است. در اين حالت به اين سلكتور، سلكتور كلاس گفته مي شود. به مثال زير توجه كنيد:

p{
color:#0000FF;
}

.sidebar{
color:#FFFFFF;
}

همانگونه كه مشاهده مي شود براي تعريف سلكتورهاي كلاس از علامت نقطه استفاده مي شود.
پس ار اينكه قانون را تعريف كرديم نوبت به استفاده از اين قانون در پاراگراف موردنظر مي رسد. براي اين منظور از ويژگي class در برچسب <p> استفاده مي كنيم. در واقع با اين كار مشخص مي كنيم كه اين پاراگراف متعلق به كدام كلاس مي باشد و خواص و قوانين آن كلاس بر روي اين برچسب اعمال مي شود.

<p class="sidebar" >اين متن سفيد رنگ خواهد بود</p>

حال فرض كنيد كه در اين پاراگراف شما يك لينك هم داريد. همانطوريكه مي دانيد لينكها بطور پيش فرض به رنگ آبي نمايش داده مي شوند و از آنجائيكه رنگ پس زمينه نيز آبي است، اين لينك ديده نمي شود. براي حل اين مشكل مي توان از كلاس تعريف شده (رنگ متن سفيد) براي برچسب <a> نيز استفاده كرد:

<p class="sidebar" >
اين متن سفيد رنگ بوده
<a class="sidebar" href="/link.htm">اين لينك نيز سفيد رنگ است</a>
</p>

حال اگر بخواهيم لينك موجود در اين قسمت به صورت ضخيم و بقيه متن به صورت عادي نمايش داده شود، كافيست سلكتور تگ را با سلكتور كلاس تركيب كنيم. به مثال زير توجه كنيد:

p {
color: #0000FF;
}
.sidebar {
color: #FFFFFF;
}
a.sidebar:link, a.sidebar:visited {
font-weight: bold;
} 

مشاهده مي كنيد كه ما علاوه بر تركيب اين دو سلكتور، از كلاس نما (Pseudo-classes) هاي :link و :visited نيز استفاده شده است. بعدا در مورد سلكتورهاي كلاس نما توضيح داده خواهد شد.

نكته مهم: اگر شما در استايل سوم رنگي غير از آنكه در استايل دوم (رنگ سفيد) مشخص شده است، تعريف كنيد، رنگ دوم بر روي لينكها اعمال خواهد شد. چرا كه استايل دوم داراي تقدم و درجه اولويت بالاتري نسبت به استايل اول است. در واقع كلمه CSS كه مخفف كلمه Cascading Style Sheet مي باشد، اسمش را از همين موضوع اخذ كرده است. بعدا راجع به اين موضوع بحث خواهيم كرد.