6
تشکر

معرفی Slectorهای جدید CSS3

معرفی Slectorهای جدید CSS3

معرفی Slectorهای جدید CSS3

ترکیب منطقی با استفاده از :NOT و :MATCHES

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

p.green,p.blue{
    background:red;
}

 
به صورت زیر مینویسیم:

p:matches(.green, .blue){
    background:red;
}

 

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

 


سلکتور بعدی not: است. که میتوان عناصر را از یک مجموعه حذف کرد. مثلا ما میخواهیم همه pها به رنگ قرمز در بیاید به غیر از آنهایی که دارای کلاس blue و green است.

p:not(.green, .blue){
    background: red;
}

 

سکلتورهای کاذب بر اساس مکان ANY-LINK:  و LOCAL-LINK:

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

میتوان به جای اینکه کدهای زیر را نوشت:

a:link, a:hover, a:visited, a:focus{
    color:red;
}

 

از این کد استفاده کرد:

a:any-link{
    color:blue;
}

 

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

توسط local-link: میتوان به لینک هایی استایل داد که فقط داخل سایت خودمان لینک شده اند.

a:local-link{
    color: green;
}

 

حتی میتوان برای آن مرحله(Level) نیز تعریف کرد. مثلا برای لینک های مرحله یک  مانند http://mysite.com از کد زیر استفاده میکنیم.

a:local-link(0){
    color: #888888;
}

 

برای مرحله دو مانند http://mysite.com/dl از کد زیر و به همین صورت:

a:local-link(1){
    color: green;
}

 

سلکتور انتخاب والد

به نظر من مهمترین سلکتور همین سلکتور است. برای مثال شما میخواهید لیستی که درون آن یک تگ a قرار دارد را قرمز بکنید اما چطور؟

ul li! a.active {
    color: red;
}

 

در واقع با گذاشتن علامت تعجب این کار را میکنیم.


نظرات این مطلب بسته است.