61- :any-link
در مثال فوق، متن Link 1 به رنگ قرمز نمایش مییابد.
62- :local-link
63- :local-link(n)
64- :active-drop-target
تمامی تگهایی را انتخاب میکند که میتوانند نقش لینک را در صفحه ایفا کنند. در واقع تگهای a، area و link را انتخاب مینماید که دارای ویژگی href هستند و به عنوان لینک عمل میکنند.
<style> :any-link { color: red; } </style> <a href="page1.htm">Link 1</a>
Selector | نسخه CSS | |||||
No | No | No | No | No | :any-link | 4 |
تمامی لینک هایی را انتخاب میکند که با آدرس صفحهی جاری یکسان میباشند.
<style> :local-link { color: red; } </style> <a href="http://www.example.com/article/">Link 1</a> <a href="http://www.example.com/article">Link 2</a> <a href="http://www.example.com/article/">Link 3</a> <a href="http://www.example.com/article/12">Link 4</a>
با فرض اینکه آدرس صفحهی جاری http://www.example.com/article/ می باشد مثال فوق را بررسی میکنیم. متن Link 1 و Link3 به رنگ قرمز نمایش مییابند، زیرا مشابه آدرس صفحهی جاری میباشند.
Selector | نسخه CSS | |||||
No | No | No | No | No | :local-link | 4 |
تمامی لینک هایی را انتخاب میکند که آدرس آنها با آدرس صفحهی جاری یکسان بوده و n بخش از آدرس آنها با بخشهای آدرس جاری یکسان باشند. در واقع n، تعداد بخش هایی از آدرس لینک را مشخص میکند که با بخشهای آدرس صفحهی جاری مطابقت داشته باشند. در مطابقت آدرس، از scheme، username، password، port، query string و fragment صرف نظر میشود تا یکسان بودن آدرس را تشخیص دهد. سپس تشخیص میدهد کدام بخشهای آدرس با هم یکسان میباشند. جهت اطلاع باید عرض کنم که شکل کامل یک آدرس به صورت scheme:[//[user:password@]host[:port]][/]path[?querystring][#fragment] میباشد.
<style> :local-link { color: red; } :local-link(0) { text-decoration: none; } :local-link(1) { text-decoration: overline; } :local-link(2) { background: blue; } </style> <a href="http://www.example.com">Link 1</a> <a href="http://www.example.com/2016">Link 2</a> <a href="http://www.example.com/2016/01">Link 3</a> <a href="http://www.example.com/2016/01/">Link 4</a> <a href="http://www.example.com/2016/01/02">Link 5</a> <a href="https://www.example.com/2016/01/">Link 6</a> <a href="http://example.com/2016/01">Link 7</a>
با فرض اینکه آدرس صفحهی جاری http://www.example.com/2016/01/ می باشد مثال فوق را بررسی میکنیم. Link 1 تحت تاثیر Selector دوم، بدون زیرخط نمایش مییابد. Link 2 تحت تاثیر Selector دوم و سوم، بدون زیرخط و با روخط نمایش مییابد. Link 3، Link 5 و Link 6 تحت تاثیر Selector دوم و سوم و چهارم، بدون زیرخط، با روخط و پس زمینهی آبی نمایش مییابند. Link 6 به دلیل استفاده از https نمیتواند تحت تاثیر Selector اول قرار بگیرد. Link 4 تحت تاثیر Selector اول و دوم و سوم و چهارم، به رنگ قرمز، بدون زیرخط، با روخط و پس زمینهی آبی نمایش مییابد. Link 7 هم بدون تاثیر هیچ Selector ی بر روی آن، بدون قالب باقی میماند، زیرا قسمت host لینک با آدرس مطابقت ندارد.
Selector | نسخه CSS | |||||
No | No | No | No | No | :local-link(n) | 4 |
تگی را انتخاب میکند که در حال حاضر به عنوان مقصد یک تگ drag (کشیده) شده در نظر گرفته شده است. به عبارت دیگر، تگی را با عمل drag کشیده ایم و بر روی یک تگ مقصد قرار داده ایم، ولی هنوز عمل drop یا رها کردن صورت نگرفته است.
Selector | نسخه CSS | |||||
No | No | No | No | No | :active-drop-target | 4 |
65- :valid-drop-target
تگی را انتخاب میکند که در حال حاضر به عنوان مقصد یک تگ drag (کشیده) شده در نظر گرفته شده است و برای عمل drop معتبر میباشد. به عبارت دیگر، تگ مقصد امکان پذیرش یک تگ را با عمل Drag & Drop دارد.
Selector | نسخه CSS | |||||
No | No | No | No | No | :valid-drop-target | 4 |
66- :invalid-drop-target
در مثال فوق، با Drag نمودن تصویر بر روی تگ div، تحت تاثیر Selector اول، رنگ پس زمینهی div آبی میشود. اگر امکان پذیرش img توسط تگ div وجود داشته باشد، کادری سبز رنگ دور تگ div نمایش مییابد در غیر اینصورت کادر قرمز رنگ دور آن نمایش خواهد یافت.
تگی را انتخاب میکند که در حال حاضر به عنوان مقصد یک تگ drag (کشیده) شده در نظر گرفته شده است و برای عمل drop معتبر نمیباشد. به عبارت دیگر، تگ مقصد امکان پذیرش یک تگ را با عمل Drag & Drop ندارد.
Selector | نسخه CSS | |||||
No | No | No | No | No | :invalid-drop-target | 4 |
<style> :active-drop-target { background: blue; } :valid-drop-target { border: 1px solid green; } :invalid-drop-target { border: 1px solid red; } .container { width: 200px; height: 200px; } </style> <div class="container"></div> <img src="image.jpg" draggable="true"/>
67- :current
تگی را انتخاب میکند که در حال حاضر در حال نمایش یا ارائه میباشد. این Selector در زمان پردازش صوت، تصویر، نمایش زیر نویس و غیره در تگ canvas مورد استفاده قرار میگیرد.
Selector | نسخه CSS | |||||
No | No | No | No | No | :current | 4 |
68- :past
تگی را انتخاب میکند که قبل از :current نمایش یافته است.
Selector | نسخه CSS | |||||
No | No | No | No | No | :past | 4 |
69- :future
هر سه Selector فوق میتوانند با دریافت آرگومان به صورت مجموعه ای از Selector ها، تگهای خاصی را انتخاب کنند یا نتیجهی انتخاب را محدود نمایند. اگر بدون آرگومان به کار روند، تک مورد نظر را بدون در نظر گرفتن محدویت انتخاب مینمایند.
در مثال فوق، تگهای div یا p که در حال حاضر در حال نمایش میباشند، با پس زمینهی سبز، تگی که قبل از :current نمایش یافته است با پس زمینهی قرمز و تگی که بعد از :current نمایش خواهد یافت با پس زمینهی زرد نمایش مییابد.
تگی را انتخاب میکند که بعد از :current نمایش یافته است.
Selector | نسخه CSS | |||||
No | No | No | No | No | :future | 4 |
<style> :past(div,p) { background: red; } :current(div,p) { background: green; } :future(div,p) { background: yellow; } </style>
70- :placeholder-shown
در مثال فوق، اگر در هر کدام از تگهای input، هیچ متنی وارد نشده باشد، متنهای Enter Username و Enter Password به رنگ طوسی نمایش مییابند.
تمامی تگهای input و textarea را انتخاب میکند که در حال نمایش یا حاوی placeholder میباشند و هنوز متنی در آنها وارد نشده است. در حال حاضر به صورت آزمایشی و با vendor prefix قابل استفاده است.
<style> :placeholder-shown { color: gray; } </style> <input placeholder="Enter Username"/> <input placeholder="Enter Password"/>
Selector | نسخه CSS | |||||
-webkit- | -wekit- | -ms- | -moz- | -webkit- | :placeholder-shown | 4 |
| | | | | | |
| | | | | | |