آموزش CSS 3 > مرجع زبان CSS 3 > انواع انتخاب کننده ها در CSS 3
انواع انتخاب کننده ها در CSS 3 :
همانطور که می دانید در CSS ، برای اینکه خواص مورد نظر خود را به یک عنصر نسبت دهید
، باید آن را انتخاب نمایید . برای انتخاب یک عنصر در صفحه ، راه های زیادی وجود دارد
. مثل استفاده از id ، کلاس یا نوع تگ .
پس از اینکه عنصر مورد نظر خود را انتخاب کردید ، می توانید خواص مورد نظرتان را به
آن تسبت دهید .
جدول زیر ، انواع انتخاب کننده ها در CSS را به همراه مثال به شما آموزش می دهد :
|
انتخاب کننده
|
مثال
|
شرح
مثال |
|
class.
|
intro.
|
تمامی عناصر عضو کلاس intro ، یعنی " class=" intro را انتخاب می کند .
|
|
id#
|
P1 # |
عنصر با id برابر با P1 را نتخاب می کند . "id="P1 . |
|
*
|
*
|
تمام عناصر موجود بر روی صفحه را انتخاب می کند . |
|
element |
P |
تماما عناصر از نوع تعیین شده را مثلا پاراگراف ، تگ < p > را انتخاب می کند .
|
|
element,element |
div,p |
تمام عناصر از نوع تعیین شده ، برای مثال < div > و < p > را انتخاب می کند . |
|
element element |
div p |
تمام عناصر <p> که درون عناصر <div> هستند را انتخاب می کند . |
|
element+element |
div+p |
پیکسل ( معادل یک نقطه بر روی صفحه ) .
|
|
[ attribute ] |
[ target ] |
تمامی عناصری که دارای خاصیت target هستند را انتخاب می کند . |
|
[ attribute = value ] |
[ target = _blank ] |
تمامی عناصری که مقدار خاصیت target آنه blank_ است را ، انتخاب می کند . |
|
link: |
a:link |
تمامی لینک هایی که تاکنون کلیک نشده اند ، را انتخاب می کند . |
|
visited: |
a:visited |
تمامی لینک هایی که قبلا دیده شده ( کلیک شده اند ) را انتخاب می کند .
|
|
hover: |
a:hover |
لینک ها را در مانی که موس بر روی آنها می رود را انتخاب می کند . |
|
focus: |
input:focus |
المنت یا عنصری که در هر لحظه فوکوس را در احتیار بگیرد ، انتخاب می کند . |
|
first-line: |
p:first-line |
اولین سطر از هر عنصر تگ < p > را انتخاب می کند . |
|
first-letter: |
p:first-lettet |
اولین کاراکتر از هر عنصر تگ < p > را انتخاب می کند . |
|
before: |
p:before |
محتویات را قبل از هر عنصر تگ < p > وارد می کند . |
|
after: |
p:after |
محتویات را بعد از هر عنصر تگ < p > وارد می کند . |
|
( lang( language: |
( p:lang( it |
تمامی عناصر تگ های <p> که مقدار خاصیت lang آنها ، با it شروع می شود را انتخاب می
کند . |
|
root: |
root: |
عنصر اصلی root صفحه را انتخاب می کند . |
|
enabled: |
input:enabled |
هر عنصر input ای که فعال ، است را انتخاب می کند . |
|
disabled: |
input:disabled |
هر عنصر input ای که غیرفعال است ، را انتخاب می کند . |
|
checked: |
input:checked |
هر عنصر input ای که علامت خورده است را انتخاب می کند . |
|
(not(selector: |
(not(p: |
تامی عناصر به جز عنصر <p> را انتخاب می کند . |
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :