آموزش سی اس اس – ۳۰ انتخابگر CSS برای طراحان وب

می شه عنوان کرد که طراحی وب بدون سی اس اس تقریبن ممکن نیست.(البته طراحی سایتی که آدمی زاد ببینه تش) بنابراین یادگیری سی اس اس از ملزومات طراحی وب محسوب می شه.یعنی حتی شما اگر یک دولوپر حرفه ای هم باشید باید آشنایی مختصری داشته باشید و در بعضی مواقع در این زمینه حرفه ای باشید. این آموزش رو تو سایت tutsplus دیدم و تصمیم گرفتیم به صورت فارسی و قابل فهم اینجا هم ارائه اش کنیم تا کسانی که نیاز دارن استفاده کنن.
برای یادگیری بهتر این آموزش باید با چن تا از مفاهیم css آشنا باشید. به صورت خلاصه:
(.)
از علامت نقطه برای تعریف کلاس(class) استفاده می شه. از کلاس برای تعیین تگ هایی به خصوصیت های مشابه استفاده می شه. برای نمونه همه ی تگ های ما که دارای خصوصیت border با ضخامت ۱ و رنگ سیاه هستن یه کلاس رو تشکیل می دن.
(#)
از علامت شارپ برای تعریف آی دی(ID). فرق ID با کلاس اینه که ID یونیک هستش و فقط متعلق به یه تگ هستش. برای مثال ما فقط یه فرم برای لاگین کردن داریم. بنابراین می تونیم براش یه ID تعریف کنیم.
(X)
برای این بخش یه مثال می زنم:

a{

color: green;

}

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

#main a {

color: red;

}

این کد یعنی در داخل آی دی main# تمامی تگ های a به رنگ قرمز باشن.
خوب شروع می کنیم:

۱- *

به این مثال توجه کنید:

* {

 margin: 0;

 padding: 0;

}

انتخابگر ستاره * تمامی تگ های توی صفحه رو انتخاب می کنه. در کد بالا تعیین کردیم که خاصیت padding و margin برای تمامی تگ ها برابر با 0px باشه. برای اینکه محسوس تر باشه براتون می تونید این خط رو هم به کد بالا اضافه کنید:

* {

 border: 1px solid #006699;

}

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

#main * {

 border: 1px solid black;

 }

سازگاری با مرورگرهای:

IE6+
Firefox
Chrome
Safari
Opera

۲- #X

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

 #container {

 width: 960px;

 margin: auto;

 }

سازگاری با مرورگرهای:

IE6+
Firefox
Chrome
Safari
Opera

۳- .X

برای تعیین کلاس از علامت (.) استفاده می کنیم. فرق کلاس با آی دی اینه که کلاس رو میتونید برای چند تا تگ مختلف استفاده کنید.(بالا توضیح دادم خدمتتون :) )

 .error {

 color: red;

 }

سازگاری با مرورگرهای:

IE6+
Firefox
Chrome
Safari
Opera

۴- X

این انتخابگر برای انتخاب مستقیم تگ ها مورد استفاده قرار می گیره. برای نمونه در جمله ی زیر شما تمامی تگ های a را انتخاب می کند:

 a {color: red;}

 li{direction: rtl;}

سازگاری با مرورگرهای:

IE6+
Firefox
Chrome
Safari
Opera

۵- X Y

شما در این نوع انتخاب درواقع دارید از وراثت استفاده می کنید. معنای این انتخابگر می شه این: تمامی تگ های y ی که داخل تگ x هستند.

 li a {

 color: red;

 }

سازگاری با مرورگرهای:

IE6+
Firefox
Chrome
Safari
Opera

۶- X:visited و X:link

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

 a:link {color: red;}

 a:visited{color: blue;}

سازگاری با مرورگرهای:

IE7+
Firefox
Chrome
Safari
Opera

۷- X + Y

انتخاب اولین تگ Y پس از تگ X

 div + p{

 border: 1px solid red;

 }

سازگاری با مرورگرهای:

IE7+
Firefox
Chrome
Safari
Opera

۸- X > Y

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

 




 لیست یک


 لیست یک-یک 







 لیست دو 

 لیست سه 

 لیست چهار 

 div#container > ul {

 border: 1px solid red;

 }

با این انتخابگر ما تعیین کردیم که تمامی تگ های ul ی که داخل تگ div با آی دی main دارای کادر قرمز با ضخامت یک پیکسل باشند.
سازگاری با مرورگرهای:

IE7+
Firefox
Chrome
Safari
Opera

۹- X ~ Y

این انتخابگر تمامی تگ های Y ی رو که پس از تگ X میان انتخاب می کنه

 div ~ p {

 border: 1px solid red;

 }

با این انتخابگر ما تعیین کردیم که تمامی تگ های ul ی که داخل تگ div با آی دی main دارای کادر قرمز با ضخامت یک پیکسل باشند.
سازگاری با مرورگرهای:

IE7+
Firefox
Chrome
Safari
Opera

۱۰- X[title]

این انتخابگر تمامی تگ های a رو که خاصیت title دارن مورد عنایت قرار می دن :D

 a[title]{

 color:green;

 }

سازگاری با مرورگرهای:

IE7+
Firefox
Chrome
Safari
Opera

۱۱- X[href="test"]

با استفاده از این انتخابگر می تونید تمامی تگ های a رو که به لینک test اشاره می کنند انتخاب می کنه.برای نمونه:

 a[href='http://test.com/']{

 color:green;

 }

با این کد تمامی لینک هایی که به نشانی http://test.com/ اشاره می کنند به رنگ سبز نشان داده خواهند شد.
سازگاری با مرورگرهای:

IE7+
Firefox
Chrome
Safari
Opera

۱۲- X[href*="test"]

با استفاده از این انتخابگر می تونید تمامی تگ های a رو که دارای واژه ی test هستن انتخاب کنید. یعنی تمامی لینک های mytest.com و test1.com و testing.com انتخاب می شن. شما می تونید از علامت های ^ برای ابتدا و & برای انتهای لینک ها استفاده کنید.
این کار با استفاده از عبارات باقاعده(regular expressions) انجام می شه. برای نمونه:

 a[href^='test']{

 color:green;

 }

این کد لینک هایی رو که ابتدای اونها با واژه ی test شروع می شن رو انتخاب می کنه.

 a[href&='test']{

 color:green;

 }

این کد لینک هایی رو که انتهای اونها با واژه ی test تمام میشه رو انتخاب می کنه.
سازگاری با مرورگرهای:

IE7+
Firefox
Chrome
Safari
Opera

۱۳- X[href^="http"]

انتخاب تمامی لینک هایی که با پروتکل http کار می کنن. یعنی لینک هایی که با سایر پروتکل ها کار می کنن انتخاب نمی شن. مثل https

 a[href^='http']{

 color:green;

 }

سازگاری با مرورگرهای:

IE7+
Firefox
Chrome
Safari
Opera

۱۴- X[href$=".jpg"]

لینک هایی که به تصاویر لینک شدن. تصاویری که پسوند .jpg دارن.
البته دقت کنید که نوع فایل ها باید در تگ های a تعیین شده باشن. برای نمونه:

 test 

 a[href$='.jpg']{

 color:green;

 }

سازگاری با مرورگرهای:

IE7+
Firefox
Chrome
Safari
Opera

۱۵- X[data-*="test"]

چطوری می شه لینک هایی رو که به تصاویری رو که از نوع jpg یا jpeg یا gif هستند انتخاب کنیم؟ یا لینک هایی که به فایل هایی از نوع doc یا pdf هستند؟
به این صورت عمل کنید:

a[data-filetype="image"] {

 color: red;

}

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

IE7+
Firefox
Chrome
Safari
Opera

۱۶- X[test~="my"]

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

 Click Me 

 a[data-info~="external"] {

 color: red;

}

a[data-info~="image"] {

 border: 1px solid black;

}

در ضمن شما می تونید از کاراکتر اسپیس " " برای جدا کردن خصوصیت ها استفاده کنید و چند خصوصیت رو به یه لینک بدین.
جالب نبود؟ :D
سازگاری با مرورگرهای:

IE7+
Firefox
Chrome
Safari
Opera

۱۷- X:checked

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

input[type=radio]:checked {

 border: 1px solid black;

}

با این کد ورودی هایی رو که از نوع radio هستن و تیک خوردن انتخاب می کنید. برای چک باکس ها هم می تونید از این خصوصیت استفاده کنید.
سازگاری با مرورگرهای:

IE9+
Firefox
Chrome
Safari
Opera

۱۸- X:after

شما می تونید برای انتهای تگ هاتون از این شبه کلاس استفاده کنید. :after و :before دو شبه کلاس هستن که می تونید از اونها استفاده کنید.
برای نمونه:

 span:after {

 content:'---';

 }

this is a test!

enjoy it.

خروجی ما به این صورت خواهد بود:

this is a test!--- enjoy it.

این نکته قابل تذکره که در CSS3 در استفاده از این شبه کلاس باید از :: به جای : استفاده کنید.
سازگاری با مرورگرهای:

IE8+
Firefox
Chrome
Safari
Opera

۱۹- X:hover

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

 div:hover {

 background: #e3e3e3;

 }

این نکته رو توجه کنید که در نسخه های قدیمی IE فقط برای تگ a می تونید از این شبه کلاس استفاده کنید. اما در مرورگر های دیگه برای تمامی تگ ها می تونید از این شبه کلاس استفاده کنید.
سازگاری با مرورگرهای:

IE6+ (In IE6, :hover must be applied to an anchor element)
Firefox
Chrome
Safari
Opera

۲۰- X:not(test)

تگ های X که دارای انتخابگر test نیستن. برای نمونه:
برای نمونه:

 div:not(#test) {

 background: #e3e3e3;

 }

این کد تمامی تگ های div رو انتخاب می کنه به جز تگ div ی که دارای آی دی test باشه.
می شه به روش های دیگه ای هم از این انتخابگر استفاده کرد:

 *:not(div) {

 background: #e3e3e3;

 }

این کد یعنی تمامی تگ ها انتخاب بشن به جز تگ های div.
سازگاری با مرورگرهای:

IE9+
Firefox
Chrome
Safari
Opera

۲۱- X::test

به جای واژه ی تست می تونید از شبه عناصر استفاده کنید.
برای اشاره به شبه عناصر باید از علامت :: استفاده کنید.
شبه عناصر چی هستن؟ مثلن برای خط اول هر پاراگراف (p) می تونید از این کد استفاده کنید:

p::first-line {

 font-weight: bold;

 font-size: 1.2em;

}

یا حرف اول هر تگی:

p::first-letter{

 font-weight: bold;

 font-size: 1.2em;

}

نکته: ما در زبان پارسی خیلی نمی تونیم از اینها استفاده کنیم (ضایع ست) :P
سازگاری با مرورگرهای:

IE6+
Firefox
Chrome
Safari
Opera

۲۲- X:nth-child(n)

در بالا عرض کردیم که می تونید از خاصیت والد و فرزندی تگ ها استفاده کنید(وراثت). با استفاده از این شبه کلاس می تونید به شماره ی فرزند(!) اشاره کنید.
مثلن چهارمین فرزند که داخل تگ div هستش:

div:nth-child(4){

 border: 1px solid;

}

سازگاری با مرورگرهای:

IE9+
Firefox 3.5+
Chrome
Safari

۲۳- X:nth-last-child(n)

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

• 1


• 2


• 3


• 4


• 5


• 6

li:nth-last-child(2){

 color: red;

}

با استفاده از کد بالا داخل لیست، شماره ی ۵ به رنگ قرمز خواهد بود.
سازگاری با مرورگرهای:

IE9+
Firefox 3.5+
Chrome
Safari
Opera

۲۴- X:nth-of-type(n)

این انتخابگر nمین تگ از نوع X رو انتخاب می کنه.

ul:nth-of-type(3) {

 border: 1px solid black;

}

با استفاده از کد بالا داخل لیست، شماره ی ۵ به رنگ قرمز خواهد بود.
سازگاری با مرورگرهای:

IE9+
Firefox 3.5+
Chrome
Safari

۲۵- X:nth-last-of-type(n)

این انتخابگر nمین تگ از نوع X رو انتخاب می کنه. منتها از آخر!

ul:nth-last-of-type(2) {

 border: 1px solid black;

}

سازگاری با مرورگرهای:

IE9+
Firefox 3.5+
Chrome
Safari

۲۶- X:first-child

اولین فرزند تگ X رو انتخاب می کنه:

ul li:first-child {

 border-top: 1px solid;

}

سازگاری با مرورگرهای:

IE7+
Firefox 3.5+
Chrome
Safari
Opera

۲۷- X:last-child

اولین فرزند تگ X رو انتخاب می کنه:

ul li:last-child {

 border-bottom: 1px solid;

}

سازگاری با مرورگرهای:

IE7+
Firefox 3.5+
Chrome
Safari
Opera

در مورد بخش ۲۶ و ۲۷ یه مثال می زنیم. ما یه لیست(ul) داریم به این صورت:
HTML:

• List Item


• List Item


• List Item

CSS:

ul {

 width: 200px;

 background: #292929;

 color: white;

 list-style: none;

 padding-left: 0;

}

li {

 padding: 10px;

 border-bottom: 1px solid black;

 border-top: 1px solid #3c3c3c;

}

لیست ما به این شکل خواهد بود:
*****************************
حالا ما این کد ها رو به کدهای CSS خودمون اضافی می کنیم:

li:first-child {

 border-top: none;

}

li:last-child {

 border-bottom: none;

}

لیست ما به این شکل خواهد شد:
****************************

IE9+
Firefox 3.5+
Chrome
Safari
Opera

۲۸- X:only-child

به مثال توجه کنید:

div p:only-child {

 border-top: 1px solid;

}

بین تگ های div اونی رو که فقط یک فرزند داره انتخاب می کنه و خصوصیات مورد نظر رو به تگ P اعمال می کنه.
دقت کنید:
اگر دوتا فرزند داشته باشه انتخاب نمی شه. و اگر فرزند، تگ P نباشه باز هم انتخاب نمی شه.
مثل این مثال:

 My paragraph here. 





 Two paragraphs total. 

 Two paragraphs total. 

سازگاری با مرورگرهای:

IE9+
Firefox 3.5+
Chrome
Safari
Opera

۲۹- X:only-of-type

به مثال توجه کنید:
HTML:

 My paragraph here. 



 List Item 

 List Item 








 Two paragraphs total. 

 Two paragraphs total. 



 List Item 

CSS:

div p:only-of-type {

 color: red;

}

li:only-of-type {

 font-weight: bold;

}

بخش اول: هر والدی div که یک فرزند از نوع p داشته باشه، رنگش رو قرمز می کنه.
بخش دوم: هر والدی از هر نوعی که تنها یک فرزند از نوع li داشته باشه.
امیدوارم که با انجام مثال کاملن متوجه شده باشید (چون من درست متوجه نشدم :P)
سازگاری با مرورگرهای:

IE9+
Firefox 3.5+
Chrome
Safari
Opera

۳۰- X:first-of-type

به مثال توجه کنید:
HTML:

 My paragraph here. 



 List Item 1 

 List Item 2 






 List Item 3 

 List Item 4 

CSS:

ul:first-of-type {

 font-weight: bold;

}

اولین تگ از نوع X رو انتخاب می کنه.
سازگاری با مرورگرهای:

IE9+
Firefox 3.5+
Chrome
Safari
Opera

امیدوارم به دردتون خورده باشه
موفق باشید