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

برای شناخت بهتر انتخابگر به تصویر زیر دقت نمایید.

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

Ancestor  جد

descendants  اولاد

parents  پدر

children  فرزند

siblings  برادر

برای درک هرچه بهتر از این موضوع در آخر این آموزش دستوری را به ساختار درختی تبدیل میکنیم.اما حالا ساختار کلی درخت را در تصویر زیر مشاهده نمایید.

نحوه استفاده از دستورات css:

در کل میتوانید به دو شکل از دستورات css استفاده نمایید. 1-سراسری  2-محلی

سراسری:در سراسری باید در قسمت انتخابگر نام عنصر مورد نظر و به دنبال آن خصوصیت و مقدار آنرا در بین کروشر( {} ) بنویسید.

مثال:

;p{font-size:20px

;font-color:#ff0000

2- محلی: از محلی میتوان به دو صورت استفاده کرد.

a-صفت class

b- صفت ID

صفت class : اگر قرار باشد از یک عنصر در دو جا با صفات (خصوصیت یا property) متفاوت استفاده کنیم آنگاه از class استفاده میکنیم.

مثال)  دستور Html

<p class=”left”> this is left class paragraph </p>
<p class=”right”> this is right side paragraph </p>

دستور Css

{ ;”left{color:”red.

{ ;”right{color:”green.

نکته: ما در بخش دستور css در قسمت انتخابگر نام هیچ عنصر را قرار ندادیم و بجای ان از نقطه و بعد از نام کلاس آن استفاده کردیم.حال صفحه css از این به بعد کلاس تگ را انتخاب میکند نه خود تگ را .شما میتوانید به چندین تگ،کلاس های مشابه (همنام) بدهید.

اگر دستورات بالا به این صورت استفاده شود. دستور css :

 {;”p.left{color:”red

فقط بالای تگ p با کلاس مربوط به آن تطبیق می گردد.

صفت ID : این صفت هم دقیقآ مانند صفت class کار میکند فقط با کمی تفاوت.

مثال) دستور css:

 { ;”left{color:”red#

دستور Html:

<p id=”left”> this is left side </p>

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

انواع انتخابگرها (type of selectors):

انتخابگر class : این نوع انتخابگر عناصری که شامل class هستند را انتخاب  می کند.

مثال) headar.

انتخابگر id : این نوع انتخابگر عناصری که شامل id هستند را انتخاب میکند.

مثال) subtitle#

انتخابگر * :این کاراکتر نشان دهنده تمامی عناصر در Html است که تمامی تگ های Html را انتخاب میکند یعنی در صورتی که خواسته باشید یک استایل را بالای تمامی صفحه تطبیق نمایید از این انتخابگر استفاده نمایید. مثال) *

انتخابگر element :این نوع انتخابگر تمامی عناصر p را انتخاب میکند. مثال) p

 انتخابگر element,element :این انتخابگر تمامی عناصر div و عناصر p را انتخاب می کند.هر گاه دو تگ را همزمان انتخاب نمایید از این نوع انتخابگر استفاده می نماییم.

مثال) div,p

انتخابگر element<element :این نوع انتخابگر تمامی عناصر h2 که عنصر والدش div است را انتخاب می کند. مثال)      h2<div

مثال Html :در مثال زیر ما دو نوع عنصر h2 داریم اما عنصر h2 دوم چون درون یک عنصر دیگری قرار گرفته و دیگر عنصر فرزند div نیست شامل انتخابگر css نمی شوند.

<div>
<h2> first p element </p>
<a href=”#”> <h2> secand p element </p></a>

<div/>

انتخابگر element+element : این انتخابگر عناصر p را که بلافاصله بعد از عنصر div آمدند را انتخاب می کند.  مثال)  div+p

انتخابگر [attribute] : این نوع انتخابگر تمامی عناصر a که شامل خصوصیت target می شوند را انتخاب می کند.   مثال)  [a[target

انتخابگر [attribute=value] : این نوع انتخابگر تمامی عناصر a که شامل  target هستند و مقدار target شان برابر با blanck_ است را انتخاب می کند. مثال) [a[target=_blank

انتخابگر [attribute~=flower] :این نوع انتخابگر تمامی عناصر a که شامل خصوصیت title هستند و محتوای این خصوصیت برابر با flower است را انتخاب میکند.

مثال)  [a[title~=flower

انتخابگر [attribute~=value] : این نوع انتخابگر تمامی عناصر a که شامل خصوصیت title هستند و محتوای این خصوصیت با w3c  شروع می شود را انتخاب می کند. مثال) [a[title |=w3c

انتخابگر link :این نوع انتخابگر تمامی عناصر a که لینک شده اند و تا هنوز آن لینک باز دید نشده اند را انتخاب می کند. مثال)  a:link

انتخابگر visited :این نوع انتخابگر تمامی عناصر a که از لینک شان بازدید شده را انتخاب می کند.مثال)  a:visited

انتخابگر hover :این نوع انتخابگر تمامی عناصر a را که ماوس روی لینک قرار گرفته را انتخاب می کند یعنی درست زمانی که شما پاینتر را روی آن قرار می دهید.  مثال) a:hover

انتخابگر active : این نوع انتخابگر تمامی لینک های فعال را انتخاب می کند. مثال) a:active

انتخابگر focus :این نوع انتخابگرتمامی input هایی را انتخاب می کند که اشاره گر ماوس درون آن input باشد و روش متمرکز را بخود اختیار کند. مثال)  input:focus

انتخابگر first-letter :این نوع انتخابگر اولین حرف عناصر p را انتخاب می کند. مثال) p:first-letter

انتخابگر first-line : این انتخابگر اولین خط همه ی عناصر ح را انتخاب می کند. مثال)  p:first-line

انتخابگر first-child :این انتخابگر اولین عنصر p در عنصر والد را انتخاب می کند. مثال)  p:first-child

مثال Html :در این مثال اولین عنصر p در div انتخاب می شود.

<div>
<p> first p element </p>
<p> secand p element </p>
<div/>

انتخابگر before : با استفاده از before شما می توانید محتوایی را قبل از محتوای عنصر مورد نظر قرار بدهید. مثال) p:before

مثال Html: در این مثال قبل از تمامی عناصر p کلمه flower را نمایش می دهد.

{;”p:before{content:”flower

انتخابگر after :با استفاده از after شما محتوایی را بعد از محتوای عنصر مورد نظر قرار میدید.

مثال) p:after

مثال Html:بعد از تمامی عناصر p کلمه flower را نمایش می دهد.

 {;”p:after{content:”flower

 انتخابگر element1~element2 :این انتخابگر تمامی  ULهایی که بعد از عنصر p قرار گرفته اند را انتخاب می کند.مهم نیست بلافاصله بعد از عنصر p امده باشند، کافی است یک عنصر p باشد،هر چقدر  عنصر UL بعد از p در کد تطبیق کنیم مورد انتخاب selector ما قرار می گیرد.

مثال) p~UL

انتخابگر [attribute$=value] :این انتخابگر تمامی عناصر a که src آنها با pdf. خاطمه پیدا کرده باشد را انتخاب میکند. مثال)  [“a[src $ =”.pdf

انتخابگر [“attribute*=”value] : این انتخابگر تمامی عناصر a را که src آنها حاوی کلمه babul باشد را انتخاب می کند. مثال)  [“a[src*=”kabul

انتخابگر first-of-type :این انتخابگر اولین عنصر p را در یک عنصر والد انتخاب می کند.

مثال)  p:first-type-of-type

مثال) Html:

<div>
<p> this is a paragraph </p>
<p> this is a paragraph </p>
<p> this is a paragraph </p>
<div/>

انتخابگر last-of type :این انتخابگر آخرین عنصر p را در یک عنصر والد انتخاب می کند.

مثال)  p:last-of-type

انتخابگر only-of-type: هر تگ <p> که تگ فرزند (only child) والد (parent) خودش باشد را انتخاب می کند. مثال)  p:only-of-type

مثال Html: در مثال زیر،فقط عنصر p اول را انتخاب می کند چون فقط یک عنصر p در عنصر div داریم.

<div><p> this is a paragraph </p></div>
<div><p> this is a paragraph </p><p> this is a paragraph </p></div>

انتخابگر only-child: این انتخابگر عنصر p که فقط خودش فرزند والدش است را انتخاب می کند.      مثال)  p:only-child

مثال Html: در مثال زیر در عنصر div اول چون فقط یک فرزند دارد و آن هم عنصر p است را انتخاب میکند. و در div دوم چون دو فرزند دارد هیچ اسارهی نمیشود.

<div><p> this is a paragraph </p></div>
<div><span> this is a span </span>
<p> this is a paragraph </p></div>

انتخابگر nth-child :این انتخابگر دومین عنصر p در یک عنصر والد را انتخاب می کند.

مثال) (p:nth-child(2

انتخابگر (nth-of-type(n :این انتخابگر تمامی عناصر p که دومین عنصر p در تگ والدشان باشد را انتخاب می کند. مثال) (p:nth-of-type(2

انتخابگر last-child :این اخرین عنصر p در عنصر والدش را انتخاب می کند.مثال) p:last-child

انتخابگر empety: این انتخابگر عناصر ح که خالی هستند و هیچ محتوایی ندارند را انتخاب می کند. مثال) p:empety

تمامی صفحات Html همانند یک درخت هستند.همان طور که در ابتدای بحث گفته بودیم یک مثال برای نشان دادن ساختار درختی در اینجا مینویسیم.

توجه قسمت Html و head را در این قسمت ننوشتیمو.

<body>
<“div id=”content>
<h1> this is site heading </h1>
<p> this is first paragraph </p>
<p> this is secand <em> site </em> paragraph </p>
<hr>
<div/>
<“div id=”nav>
<ul>
<li> first iteam </li>
<li> secand iteam </li>
<li> third iteam </li>
<ul/>
<div/>
<body/>

حال کد بالا را به صورت درختی به شکل زیر نشان می دهیم.

در درخت فوق کد تگ div دوم را با رنگ دیگر مجزا شده می توان به گونه زیر نیز بیان کرد.

فرزندی از عنصر <body>

پدر عنصر <ul>

جد عناصر <ul>و<li>

برادر عنصر <div> دیگر چون پدرهای آن ها یکسان است <body>.