انواع selector ها در CSS :

در پست قبل به selector ها در CSS اشاره ای داشتیم. به طور کلی در CSS به سه روش می توانیم از طریق selector ها، استایل دلخواه را به تگ های HTML اعمال کنیم:

  1. با استفاده از نام تگ
  2. با استفاده از آی دی (ID) تگ
  3. با استفاده از کلاس (Class) تگ

نکته:
می توان با استفاده از ترکیب دو یا سه مورد بالا نیز این اعمال را انجام داد.

با استفاده از selector اول، نام تگ:

با نوشتن نام یک برچسب خاص، استایل مورد نظر بر روی تمام برچسب های هم نام ذکر شده در selector ، اعمال می شود.

به عنوان نمونه در مثال زیر تمام تگ های h4 موجود در صفحه به رنگ آبی تغییر می کنند:

h4 {color: blue;}

با استفاده از سلکتورهای id و class:

ID و Class دو خصوصیت عمومی در تگ ها هستند. برای مطالعه بیشتر درباره id و class می توانید به مطالب خصوصیت در تگ های HTML و id و class در HTML رجوع کنید.

اختصاص دادن استایل به id در CSS:

برای اختصاص دادن یک استایل خاص به id مورد نظر باید ابتدا علامت #(شارپ) که در CSS نشانه ی id است، قرار دهیم و بلافاصله نام id را بنویسیم.

در مثال زیر نام id  تگ <p> برابر با pid1 است، پس برای نشان دادن آن id در CSS به صورت زیر عمل می کنیم:

<!DOCTYPE html>
<html>
 
 <head>
 <meta charset="utf-8">
 <title>vitrinwp</title>
 
 <style>
  #hid1{color: red;}
  #pid1{color: blue;}
 </style>
 
 </head>
 
 <body>
 
 <h4 id="hid1">استفاده از id در تگ h4</h4>
 <p id="pid1">استفاده از id در کدهای CSS و در تگ p</p>
 
 </body>
</html>

 

نتیجه کد های بالا به صورت زیر خواهد بود:

استفاده از id در تگ h4

استفاده از id در کدهای CSS و در تگ p

برای کدهای بالا به صورت زیر نیز نتیجه یکسانی خواهد داد:

 h4#hid1{color: red;}
 p#pid1{color: blue;}

اختصاص دادن استایل به class در CSS:

اختصاص دادن یک استایل خاص به class نیز مانند id می باشد با این تفاوت که در اینجا به جای استفاده از علامت#  از علامت نقطه(.) استفاده می کنیم.

به مثال زیر که ترکیبی از id و class است توجه کنید:

<!DOCTYPE html>
<html>
 
 <head>
 <meta charset="utf-8">
 <title>vitrinwp</title>
 
 <style>
 .hclass1{color: red;}
  p#pid1{color: blue;}
  #sid1.sclass1{color: yellow;}
  span#sid2.sclass1{color: green;}
 </style>
 
 </head>
 
 <body>
 
 <h4 class="hclass1">استفاده از id در تگ h4</h4>
 <p id="pid1">استفاده از id در کدهای CSS و در تگ p</p>
 <span id="sid1" class="sclass1">تگ span با  sid1</span>
 <span id="sid2" class="sclass1">تگ span با sid2</span>
 
 </body>
</html>

 

نتیجه کد بالا به صورت زیر خواهد شد:

استفاده از id در تگ h4

استفاده از id در کدهای CSS و در تگ p

تگ span با sid1
تگ span با sid2