جلسه ی بیست و پنجم: انتخاب گر ها (selectors)

شاید به این فکر باشید که چگونه برای یک عنصر در وب سایت خود باید یک استایل تعریف کنیم به گونه ای که به تمامی عناصر مشابه آن عنصر در وب سایت شما از یک استایل خاص پیروی کنند؟؟؟ آیا می توان به دو عنصر مختلف یک استایل بخشید؟؟؟ برای دریافت جواب این سوالات در این آموزش همراه ما باشید. ( برای دیدن آموزش Html به زبان ساده کلیک کنید )

Selector چیست؟

برای اینکه بخواهیم به یک عنصر در وب سایت خود ویژگی های مشخصی بدهیم ابتدا باید آن عنصر را انتخاب کنیم. برای انتخاب عناصر مورد نظر در وب سایت خود از Selector ها استفاده می کنیم.

اگر بخواهیم در یک تعریف ساده Selector ها را تعریف کنیم باید بگوییم Selector ها الگویی هستند که به ما اجازه می دهند از طریق آن ها یک المان در زبان نشانه گذاری HTML را انتخاب و به آن ویژگی های مورد نظر خود را اعمال کنیم.

از انتخابگرها برای ایجاد استایل های مناسب به صورت تکی یا جزئی استفاده می شود، بگذارید با یک مثال به تثبیت این جمله بپردازیم. فرض کنید میخ.اهید چهار پنجره در دو ردیف دوتایی را رنگ نمایید به چند حالت می توانید این پنجره ها را رنگ نمایید برای مثال می توانید همه ی پنجره های مورد نظر را به رنگ
آبی در بیاورید یا فقط پنجره ی دوم از ردیف بالایی را رنگ نمایید. نحوه ی رنگ کردن این پنجره ها به انتخاب شما می باشد در زبان نشانه گذاری CSS نیز شما قردت انتخاب دارید که این قدرت به وسیله ی انتخابگرها ایجاد می شود و شما از آن بهره می برید.

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

انواع Selector ها

Selector ها به چهار دسته ی اصلی تقسیم می شوند که در اینجا به معرفی و آموزش کار با آن ها می پردازیم:

1. انتخابگرهای سراسری (Universal)
2. انتخابگرهای نوع (Type)
3. انتخابگرهای کلاس (Class)
4. انتخابگرهای نام (ID)

انتخابگرهای سراسری (Universal)

انتخابگرهای سراسری (Universal) به انتخابگرهایی می گویند که بر روی تمامی عناصر انتخابی مورد نظر ما بر وب سایت اعمال می شود. برای استفاده از Selector سراسری باید از عملگر ستاره (*) استفاده کنیم.

نحوه ی استفاده از انتخابگر سراسری به این گونه است که ابتدا المان ستاره (*) را نوشته و سپس آکولاد خود را باز می کنیم حال ویژگی های مورد نظر خود را درون آکولاد نوشته سپس آکولاد را می بندیم. به نمونه کد زیر توجه کنید:

* {

color: red;

background: #000

}

برای مثال در کد بالا تمامی نوشته ها به رنگ قرمز و هر جایی که برای آن پس زمینه (Background) تعریف شده باشد به رنگ سیاه مبدل می شود.

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

انتخابگرهای نوع (Type)

در این نوع انتخابگر المان های انتخاب کننده تگ ها و شناسه های زبان HTML می باشند، به این انتخابگر، انتخابگر تگ نیز می گویند که از طریق آن می توان به تمامی تگ ها یا نوع خاصیس از تگ ها ویژگی های مورد نظز خود را اعمال کنیم. نحوه ی کار با این المان ها بسیار ساده می باشد فقط کافیست اسم تگ مورد نظر خود را بنویسیم و ویژگی های مورد نظر خود را به آن اعمال می کنیم.

البته ناگفته نماند که این ویژگی حالت های مختلفی برای نوشتن دارد و ما در اینجا به آموزش این حالات می پردازیم.

1. element
2. element,element
3. element element
4. element>element
5. element+element
6. element1~element2
7. :active
8. :link
9. :Visited
10. :hover
11. :focus
12. :first-child
13. ::first-letter
14. ::first-line

Element

اولین و راحتترین نوع آن نوشتن تنها یک المان بدون هیچ ترکیب خاصی می باشد که تمام خاصیت های موجود در صفحه ویژگی های مورد نظر ما را می گیرند. به نمونه کد زیر توجه کنید:

p {

color: red;

background: #000

}

در مثال بالا تمامی نوشته هایی که درون تگ p قرار دارند به رنگ قرمز با پس زمینه ی سیاه مبدل می شوند.

Element,element

حال اگر بخواهیم به چندین تگ به صورت همزمان استایل های مورد نظر خود را اعمال کنیم از این حالت استفاده میکنیم به گونه ای که ابتدا یک تگ را نوشته و تگ های بعدی را به وسیله ی کامای انگلیسی از هم جدا می کنیم. به نمونه کد زیر توجه کنید:

p,h1 {

color: red;

background: #000;

font-size: 30px;

}

در مثال بالا تمامی تگ های p و H1 به رنگ قرمز با پس زمینه ی سیاه و به فونت ۳۰px تبدیل می شوند.

Element element

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

نکته: یادتان باشد در این روش تمامی ویژگی ها به تگ فرزند اضافه می شود و تگ مادر در این بین فقط یک واسطه می باشد. به نمونه کد زیر توجه کنید:

[CSS]

p span {

color: red;

background: #000;

}

[/CSS]

برای مثال در کد بالا تگ های Span درون یک تگ p به رنگ قرمز و پس زمینه ی سیاه مبدل شده اند.

Element>element

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

p>span {

color: red;

background: #000;

}

در این حالت به تمامی تگ های span که فرزندان اصلی تگ p می باشند استایل مورد نظر ما اعمال می شود.

Element+element

در این حالت در صورتی که اولین تگ بعد از تگ مورد نظر ما تگ مربوطه باشد شامل ویژگی های مورد نظر ما می شود. به نمونه کد زیر توجه کنید:

p+span {

color: red;

background: #000;

}

برای مثال در نمونه کد بالا اولین تگی که بعد از تگ p وجود دارد اگر تگ span باشد به رنگ قرمز و با پس زمینه ی مشکی مبدل می شود اما در صورتی که مابین تگ p و Span یک تگ دیگر وجود داشته باشد کد بالا تاثیری نخواهد داشت.

element1~element2

از این حالت برای انتخاب تمام حالت هایی که element2 قبل از element1 آمده است می باشد. برای فهم بیشتر به نمونه کد زیر توجه کنید:

}

h2~p{

color: red;

background: #000;

}

برای مثال در نمونه کد بالا تمامی تگ های p که قبل از تگ h2 امده است به رنگ قرمز با پس زمینه ی مشکی مبدل می شود.

:active

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

a:active {

color: #000

}

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

:link

در این حالت از انتخابگر های تگ تمامی لینک های مورد نظر ما که بر روی آن ها کلیک نشده است را انتخاب و ویژگی های مورد نظر ما را بر روی آن اعمال می کند. به نمونه کد زیر توجه کنید:

a:link {

color: green

}

برای مثال در نمونه کد بالا تمامی لینک هایی که بر روی آن کلیکک نشده است به رنگ سبز مبدل می شوند.

:Visited

در این حالت تمامی تگ های مورد نظر که بر روی آن ها کلیک شده است را انتخاب و ویژگی های مورد نظر ما را به آن اعمال می کند. به نمونه کد زیر توجه کنید:

a:visited {

color: yellow

}

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

:hover

در این حالت تمامی اجزای مورد نظر ما که موس بر روی آن ها قرار گرفته است انتخاب و ویژگی های مورد نظر ما بر روی آن اعمال می شود. به نمونه کد زیر توجه کنید:

h1:hover {

color: red;

font-size: 40px;

transition: 0.5s

}

برای مثال در نمونه کد بالا زمانی که موس بر روی تگ H1 قرار می گیرد در زمان نیم ثانیه بزرگتر شده و به رنگ قرمز مبدل می شود.

نکته: همانطور که در دو حالت link و Visited مشاهده کردید از این ویژگی ها معمولا برای تگ a استفاده می شود و از حالت hover در هر وضعیتی می توان استفاده کرد برای مثال شما می توانید به یک تگ H1 نیز حالت Hover را اضافه نمایید.

:focus

از این حالت معمولا برای تگ های input استفاده می شود چون زمانی که بر روی یک تگ input کلیک می کنیم به حالت Focus نیزمبدل می شود. پس زمانی که بخواهیم به تگ input خود که در وب سایت وجود دارد ویژگی هایی اعمال کنیم از این روش استفاده می کنیم.

:first-child

در این حالت از Selector اولین فرزند از تگ مورد نظر ما را انتخاب و استایل های مورد نظر ما را به آن اعمال می کند. به نمونه کد زیر توجه کنید:

h1:first-child {

color: red;

font-size: 40px;

}

در نمونه کد بالا تمامی تگ های H1 که اولین فرزند از پدر خود هستند به رنگ قرمز و به اندازه ی ۴۰px مبدل می شوند.

::first-letter

در این حالت اولین حرف از تگ مورد نظر ما را انتخاب و ویژگی های مورد نظر ما را به آن اعمال می کند. به نمونه کد زیر توجه کنید:

h1::first-letter {

color: red;

font-size: 40px;

}

در نمونه کد بالا اولین حرف از تگ H1 به رنگ قرمز و به اندازه ی ۴۰px مبدل می شود.

نکته: معمولا از این ویژگی برای زبان انگلیسی استفاده می شود زیرا به فقط به اولین حرف اعمال می شود.

::first-line

در این حالت از Selector برای اعمال ویژگی های مورد نظر ما به اولین خط از تگ مورد نظر ما می باشد. به نمونه کد زیر توجه کنید:

h1::first-line {

color: red;

font-size: 40px;

}

برای مثال در نمونه کد بالا خط اول از تگ h1 به رنگ قرمز و با اندازه ۴۰px مبدل می شود.

انتخابگرهای کلاس (Class)

حال که با انتخابگر های سراسری و نوع آشنا شدیم لازم است که با پرکاربرد ترین نوع انتخابگر آشنا شویم. انتخابگر کلاس که نامش برای همه ی ما آشناس پر کاربرد ترین نوع انتخابگر است زیرا بیشترین کدهای ما در زبان نشانه گذاری CSS توسط این انتخابگر نوشته می شود. انتخابگر های کلاس عبارتند از:

1. .Class
2. [attribute]
3. [attribute=value]
4. [attribute~=value]
5. [attribute|=Value]
6. [attribute^=value]
7. [attribute$=value]
8. [attribute*=value]

.Class

انتخابگر های کلاس چندین نوع می باشند اولین نوع انتخاب گر های کلاس خود کلاس می باشد. از طریق کلاس بندی ما می توانیم به یک مبحث یا بخشی از وب سایت خود ویژگی ای مورد نظر خود را اعمال کنیم. به نمونه کد زیر توجه کنید:

.bold {

font-weight: bold;

}

در نمونه کد بالا تمامی اجزایی که در زبان HTML کلاس bold را دارند به صورت برجسته نایمایش داده می شوند.

از طریق انتخابگر کلاس عموما ما می توانیم به تمامی اجزای یک وب سایت دسترسی داشته باشیم برای مثال یک باکس مطلب را در نظربگیرید. خب برای ایجاد یک باکس ابتدا ما یک کلاس ایجاد می نماییم سپس به اجزای درون باکس مطلب از طریق کلاسی که برای باکس مطلب خود تعیین نموده ایم دسترسی خواهیم داشت.

برای مثال اگر بخواهیم یک عکس درون باکس مطلب خود قرار دهیم نیازی نیست که یک کلاس دیگر برای عکس مورد نظر خود ایجاد کنیم فقط کافیست کلاس مورد نظر خود را نوشته و سپس تگ img رابعد از آن بنویسید. در این صورت می توانید ویژگی های مورد نظر خود را به عکس داخل باکس مطلب اعمال کنید.

.box img {

width: 50%;

height: 30%

}

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

<div class="bold blue">...</div>

برای مثال در نمونه کد بالا دو کلاس Bold و Blue به یک مبحث اضافه شده اند.

نکته: نام یک کلاس نمی تواند با عدد آغاز شود.

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

<div class="bold blue">...</div>

<p class="bold">...</p>

<span class="bold">...</span>

[attribute]

حال که به مقدمات یک کلاس آشنا شدیم حال نیاز است که با کاربرد حرفه ای نیز در این باره آشنا شوید. برای مثال در حالت نوشتاری به این گونه است که ابتدا نام کلاس یا تگ مورد نظر خود را نوشته سپس ویژگی مورد نظر خود را داخل کروشه قرار می دهیم.

یعنی به کلاس یا تگ هایی که ویژگی X را دارند استایل های مورد نظر خود را اعمال می نمایی. برای فهم بیشتر به نمونه کد زیر توجه کنید:

a[href] {

color: yellow

}

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

[attribute=value]

حال می خواهیم که حالت بالا را با دقت بیشتری مورد بررسی قرار دهیم. ممکن است بعضی از ویژگی ها در زبان نشانه گذاری HTML خود دارای حالات مختلف باشند و مقادیر مختلفی بگیرند برای مثال ویژگی Target یا ویژگی Href ممکن است خصوصیات یا مقادیر متفاوتی را بگیرند را داشته باشند ولی فقط یک خصوصیت یا مقدار آن مورد نظر ما باشد در این صورت نمونه کد خود را به ویژگی مورد نظر خود نزدیک میکنیم تا خطایی برای ما وجود نداشته باشد. برای فهم بیشتر به نمونه کد زیر توجه کنید:

a[target="_blank"] {

color: red;

font-size: 30px;

}

برای مثال در نمونه کد بالا تمام تگ های a که دارای خاصیت target=”_blank” می باشند به رنگ زرد با اندازه ی ۳۰px مبدل می شوند.

[attribute~=value]

در این حالت تمامی تگ ها یا کلاس هایی که دارای ویژگی Attribute با مقدار Value می باشند را انتخاب و ویژگی های مورد نظر ما را بر روی آن اعمال می کند.

نکته: در این حالت برای فراخوانی ویژگی مورد نظر ما حتما باید به صورت مجزا فراخوانی شود. برای فهم بیشتر به نمونه کد زیر توجه کنید:

a[title~=kamyabiha] {

color: red

}

برای مثال در نمونه کد بالا اگر یک Title با Kamyabiha آغاز شود به رنگ قرمز مبدل می شود.

[attribute|=Value]

در این حالت تمامی عناصر که ویژگی آن ها با Value آغاز می شود را انتخاب و استایل های مورد نظر ما را به آن اعمال می کند. به نمونه کد زیر توجه کنید:

.class [lang|=fa] {

color: red;

}

برای مثال در نمونه کد بالا تمام کلاس هایی که با نام Class وجود دارد و ویژگی lang آن ها با fa آغاز می شود را انتخاب و به رنگ قرمز مبدل می کند.

[attribute^=value]

در این حالت تمام ویژگی های Attribute که با مقدار Value آغاز می شوند انتخاب و ویژگی های مورد نظر ما به آن ها اعمال می شود. به نمونه کد زیر توجه کنید:

a[href^="https"] {

color: red

}

برای مثال در نمونه کد بالا تمامی لینک هایی که با https شروع می شود به رنگ قرمز مبدل می شوند.

[attribute$=value]

در این حالت تمام ویژگی هایی که با Value تمام می شوند را انتخاب و استایل های مورد نظر ما را به آن اعمال می کند. به نمونه کد زیر توجه کنید:

a[href$=".com"] {

color: blue

}

برای مثال تمامی لینک هایی که با .com به پایان رسیده اند را به رنگ آبی مبدل می شوند.

[attribute*=value]

در این حالت اگر مقدار Value درون ویژگی ما قرار داشته باشد تمامی ویژگی های مورد نظر ما به آن اعمال می شود. به نمونه کد زیر توجه کنید:

a[href*="kamyabiha"] {

color: green

}

برای مثال در نمونه کد بالا تمامی لینک هایی که درون آن کلمه ی Kamyabiha وجود دارد به رنگ سبز مبدل می شود.

انتخابگرهای نام (ID)

نحوه ی استفاده از Selector ID مانند کلاس می باشد اما تفاوت هایی نیز دارند. اولین تفاوت بین کلاس و ID نحوه ی فراخوانی آن ها در زبان CSS می باشد. برای فراخوانی کلاس از نقطه استفاده می کنند و برای فراخوانی ID از # استفاده می شود. برای مثال به نمونه کد زیر دقت کنید:

کد HTML:

<p class="red">کمیابی ها</p>

<p id="blue">کمیابی ها</p>

کد CSS:

#blue {

color: blue;

}

.red {

color: red;

}

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

نکته: استفاده از ID توصیه نمی شود زیرا سطح دستری محدودی دارد و باعث افزایش حجم کد های ما می شود.

خلاصه مطلب:

1. برای انتخاب عناصر مورد نظر در وب سایت خود خود از Selector ها استفاده می کنیم.
2. در صورت استفاده ی نادرست از Selector در هنگام ویرایش باعث چند برابری کد های ما شده و شاید مجبور شویم یک کد را از اول بنویسیم.
3. انتخابگرهای سراسری به انتخابگرهایی می گویند که بر روی تمامی عناصر انتخابی مورد نظر ما بر وب سایت اعمال می شود. برای استفاده از Selector سراسری باید از عملگر ستاره (*) استفاده کنیم.
4. در این نوع انتخابگر المان های انتخاب کننده تگ ها و شناسه های زبان HTML می باشند، به این انتخابگر، انتخابگر تگ نیز می گویند که از طریق آن می توان به تمامی تگ ها یا نوع خاصیس از تگ ها ویژگی های مورد نظز خود را اعمال کنیم.
5. Element راحتترین نوع نوشتن یک المان بدون هیچ ترکیب خاصی می باشد که تمام خاصیت های موجود در صفحه ویژگی های مورد نظر ما را می گیرند.
6. Element,element حال اگر بخواهیم به چندین تگ به صورت همزمان استایل های مورد نظر خود را اعمال کنیم از این حالت استفاده می کنیم.
7. Element element در این صورت ابتدا تگ مادر را نوشته و سپس تگ فرزند را می نویسیم و ما بین آن ها فقط یک فاصله می گذاریم البته یادتان باشد در این روش تمامی ویژگی ها به تگ فرزند اضافه می شود.
8. Element>element این حالت شبیه حالت Element element می باشد اما یک تفاوت اصلی در این دو حالت وجود دارد و آن هم این است که در حالت Element element تمامی تمامی فرزندان را شامل می شود اما در این حالت فقط فرزندان اصلی شامل این ویژگی ها می شوند.
9. Element+element در صورتی که اولین تگ بعد از تگ مورد نظر ما تگ مربوطه باشد شامل ویژگی های مورد نظر ما می شود.
10. element1~element2 برای انتخاب تمام حالت هایی که element2 قبل از element1 آمده است می باشد.
11. در حالت :active تمامی لینک های فعال مشخص و استایل های مورد نظر ما را می گیرند.
12. در حالت :link انتخابگر های تگ تمامی لینک های مورد نظر ما که بر روی آن ها کلیک نشده است را انتخاب و ویژگی های مورد نظر ما را بر روی آن اعمال می کند.
13. در حالت :Visited تمامی تگ های مورد نظر که بر روی آن ها کلیک شده است را انتخاب و ویژگی های مورد نظر ما را به آن اعمال می کند.
14. از حالت :focus زمانی که بخواهیم به تگ input خود که در وب سایت ویژگی هایی اعمال کنیم از این روش استفاده می کنیم.
15. در حالت :first-childاز Selector اولین فرزند از تگ مورد نظر ما را انتخاب و استایل های مورد نظر ما را به آن اعمال می کند.
16. در حالت ::first-letter اولین حرف از تگ مورد نظر ما را انتخاب و ویژگی های مورد نظر ما را به آن اعمال می کند.
17. در حالت ::first-line از Selector برای اعمال ویژگی های مورد نظر ما به اولین خط از تگ مورد نظر ما می باشد.
18. انتخابگر کلاس که نامش برای همه ی ما آشناس پر کاربرد ترین نوع انتخابگر است زیرا بیشترین کدهای ما در زبان نشانه گذاری CSS توسط این انتخابگر نوشته می شود.
19. در حالت .Class می توانیم به یک مبحث یا بخشی از وب سایت خود ویژگی ای مورد نظر خود را اعمال کنیم.
20. از حالت [attribute] برای انتخاب کلاس یا تگ هایی که ویژگی خاصی دارند استفاده می شود.
21. از حالت [attribute=value] برای ایجاد دقت بیشتر در حالت [attribute] استفاده می شود شاید ویژگی مورد نظر ما دارای حالت خاصی باشد در این صورت از این حالت استفاده می کنیم.
22. از حالت [attribute|=Value] برای تمامی عناصر که ویژگی آن ها با Value آغاز می شود را انتخاب و استایل های مورد نظر ما را به آن اعمال می کند.
23. در حالت [attribute^=value] تمام ویژگی های Attribute که با مقدار Value آغاز می شوند انتخاب و ویژگی های مورد نظر ما به آن ها اعمال می شود.
24. در حالت [attribute$=value] تمام ویژگی هایی که با Value تمام می شوند را انتخاب و استایل های مورد نظر ما را به آن اعمال می کند.
25. در حالت [attribute*=value] اگر مقدار Value درون ویژگی ما قرار داشته باشد تمامی ویژگی های مورد نظر ما به آن اعمال می شود.
26. برای فراخوانی کلاس از نقطه استفاده می کنند و برای فراخوانی ID از # استفاده می شود.
27. تفاوت دیگر بین کلاس و ID کاربرد آن ها است از طریق یک کلاس شما می توانید به اجزای داخل یک کلاس نیز دسترسی داشته باشید اما به وسیله ی ID شما فقط می توانید به عنصری که ID بر روی آن فراخوانی شده است استایل بدهید.