ویژگی های Css انتخابگرهای سفارشی در CSS

انتخابگرها بر اساس ویژگی های برچسب

انتخابگرهای مشخصه، انتخابگرهای خاصی هستند که یک سبک را بر اساس اینکه دارای یک ویژگی خاص است یا مقدار خاصی، به یک عنصر متصل می کنند. چندین گزینه برای استفاده از چنین انتخابگرهایی وجود دارد.

1. انتخابگر ویژگی ساده

به نظر می رسد:

<селектор>[<имя атрибута тега>] { <стиль> }

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

قوی (
رنگ: قرمز؛
}
...

خودرواین یک موتور مکانیکی بدون مسیر است وسیله نقلیه"> وسیله نقلیه جاده ایبا حداقل 4 چرخ

نتیجه:

در تصویر می بینید که قانون css (رنگ متن قرمز) روی عنصر اعمال شده است قوی، که ویژگی به آن اضافه می شود عنوان.

2. انتخابگر صفت با مقدار

سینتکس این انتخابگر به صورت زیر است:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

مقید می کند سبکبه عناصری که برچسب های آنها دارای یک ویژگی با مشخص شده است نامو معنی. مثال:

آ(
رنگ: قرمز؛
اندازه فونت: 150%;
}
...
.ru" target="_blank">پیوند در پنجره جدید

نتیجه:

همانطور که می بینید، هر دو عنصر از نوع هایپرلینک دارای ویژگی هستند هدفاما قانون css که متن پیوند را یک و نیم برابر بزرگ می کند و رنگ آن را به قرمز تغییر می دهد بر روی تگ اعمال می شود. که ویژگی هدفمعنی دارد "_جای خالی".

3. یکی از چندین مقدار مشخصه

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

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

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

{
رنگ: قرمز؛
اندازه فونت: 150%;
}
...

تلفن ما: 777-77-77

آدرس ما: خیابان مسکو سووتسکایا 5

نتیجه زیر را دریافت خواهید کرد:

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

4. خط فاصله در مقدار ویژگی

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

[ویژگی|=مقدار] (سبک)
انتخابگر[ویژگی|="مقدار"] (سبک)

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

{
رنگ: قرمز؛
اندازه فونت: 150%;
}
...

• بند 1


• نقطه 2


• نکته 3


• نقطه 4

نتیجه:

در مثال، قانون style فقط برای آن دسته از عناصر لیست که نام کلاس آنها با مقدار شروع می شود اعمال می شود "منو- ".

5. مقدار مشخصه با متن خاصی شروع می شود

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

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

در مورد اول سبکبرای تمام عناصری که تگ‌هایشان دارای ویژگی با مشخص شده است اعمال می‌شود نامو مقداری که با مقدار مشخص شده شروع می شود رشته های فرعی. در مورد دوم، همان چیز، فقط به عناصر خاصی مشخص شده است انتخابگر اصلی. مثال:

آ(
رنگ: سبز؛
font-weight:bold;
}
...

نتیجه:

مثال نشان می دهد که چگونه پیوندهای خارجی و پیوندهای داخلی را به طور متفاوت نمایش دهید. پیوندهای خارجی همیشه با رشته "http://" شروع می شوند. بنابراین، در انتخابگر نشان می‌دهیم که استایل فقط برای پیوندهایی اعمال می‌شود که دارای ویژگی هستند hrefبا معنا شروع می شود http://.

6. مقدار مشخصه با متن خاصی به پایان می رسد

یک سبک را به عناصری که مقدار مشخصه آنها با متن مشخص شده ختم می شود پیوند می دهد. دارای نحو زیر است:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

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

IMG (
حاشیه: 5 پیکسل قرمز جامد.
}
...

تصویر GIF

فرمت تصویر png

نتیجه:

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

7. مقدار مشخصه شامل رشته مشخص شده است

این انتخابگر یک سبک را به برچسب هایی که مقدار مشخصه آنها حاوی متن خاصی است متصل می کند. نحو:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

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

IMG (
حاشیه: 5 پیکسل قرمز جامد.
}
...

عکس از پوشه گالری

عکس از یک پوشه دیگر

نتیجه:

در مثال، این استایل برای تصاویری که از پوشه بارگذاری شده اند اعمال می شود "آلبوم عکس".

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

انتخابگر[attribute1="value1"][attribute2="value2"] (سبک)

علاوه بر این، اجازه دهید در مورد انتخابگرهای ویژه CSS به شما یادآوری کنم:

• با استفاده از نمادهای "+" و "~" تشکیل می شود.
• نماد ">" استایل های css را به آن متصل می کند شرکت های تابعهبرچسب ها;
• سمبل<пробел>انتخابگرهای زمینه را تولید می کند.

در مقالات آینده، شبه عناصر و شبه کلاس ها را نیز بررسی خواهیم کرد که ابزارهای مدیریت سبک قدرتمندی را ارائه می دهند.

همین، دوباره می بینمت.

ولاد مرژویچ

بسیاری از برچسب‌ها بسته به ویژگی‌هایی که استفاده می‌کنند، تأثیرشان متفاوت است. مثلا تگ کنید فقط با تغییر مقدار مشخصه type می تواند یک دکمه، فیلد متنی و سایر عناصر فرم ایجاد کند. با این حال، افزودن قوانین سبک به انتخابگر INPUT، استایل را به طور همزمان برای همه عناصر ایجاد شده با استفاده از این تگ اعمال می کند. برای کنترل انعطاف پذیر سبک چنین عناصری، انتخابگرهای ویژگی در CSS معرفی شده اند. آنها به شما این امکان را می دهند که یک سبک را بر اساس وجود یک ویژگی برچسب خاص یا مقدار آن تنظیم کنید.

بیایید به چندین کاربرد معمولی چنین انتخابگرهایی نگاه کنیم.

انتخابگر صفت ساده

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

[ویژگی] (شرح قانون سبک)
انتخابگر[ویژگی] (توضیح قوانین سبک)

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

مثال 13.1 تغییر سبک یک برچسب را نشان می دهد ، در صورتی که ویژگی title به آن اضافه شود.

مثال 13.1. نوع عنصر بسته به ویژگی آن

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

نتیجه مثال در شکل نشان داده شده است. 13.1.

برنج. 13.1. تغییر سبک یک عنصر بسته به کاربرد ویژگی عنوان

در این مثال رنگ متن داخل ظرف تغییر می کند وقتی عنوان به آن اضافه شود. توجه داشته باشید که نیازی به تکرار خصوصیات استایل برای انتخابگر Q نیست، زیرا آنها از انتخابگر Q به ارث رسیده اند.

صفت با ارزش

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

[attribute="value"] (توضیح قوانین سبک)
Selector[attribute="value"] (شرح قوانین سبک)

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

مثال 13.2 نشان می دهد که چگونه می توان سبک یک پیوند را در صورت تگ تغییر داد حاوی ویژگی هدف با مقدار _blank است. در این صورت لینک در یک پنجره جدید باز می شود و برای نشان دادن این موضوع با استفاده از استایل ها یک عکس کوچک جلوی متن لینک اضافه می کنیم.

بیایید فرض کنیم که سایت شما باید سبک پیوندهای معمولی و خارجی را از هم جدا کند - پیوندهایی که به سایت های دیگر منتهی می شوند. برای اینکه وارد تگ نشوید کلاس جدید، بیایید از انتخابگرهای ویژگی استفاده کنیم. پیوندهای خارجی با افزودن یک پروتکل به آدرس مشخص می شوند، به عنوان مثال، پروتکل HTTP برای دسترسی به اسناد فرامتن استفاده می شود. بنابراین، پیوندهای خارجی با کلمه کلیدی http:// شروع می شوند و همانطور که در مثال 13.3 نشان داده شده است، آن را به انتخابگر A اضافه می کنیم.

که در در این مثالشامل دو پیوند منتهی به دامنه های مختلف - com و ru. در عین حال، هر پیوندی دارای تصویر پس‌زمینه خاص خود است که با استفاده از سبک‌ها اضافه شده است (شکل 13.4). ویژگی های استایلینگ فقط برای پیوندهایی اعمال می شود که ویژگی href آنها به «.ru» یا «.com» ختم می شود. لطفاً توجه داشته باشید که با اضافه کردن یک اسلش (http://www.yandex.ru/) یا آدرس صفحه (http://www.yandex.ru/fun.html) به نام دامنه، به این ترتیب پایان و این سبک دیگر اعمال نخواهد شد. در این حالت بهتر است از یک انتخابگر استفاده کنید که متن مشخص شده در هر نقطه از مقدار ویژگی ظاهر شود.

مقدار مشخصه حاوی متن مشخص شده است

گزینه هایی وجود دارد که در آن استایل باید روی یک برچسب با یک ویژگی خاص اعمال شود و مقداری متن بخشی از ارزش آن است. با این حال، دقیقاً مشخص نیست که این متن در کجای معنی گنجانده شده است - در ابتدا، میانه یا پایان. در چنین حالتی باید از این نحو استفاده کنید.

[ویژگی*="ارزش"] (توضیح قوانین سبک)
انتخابگر[ویژگی*="مقدار"] (شرح قوانین سبک)

مثال 13.5 نشان می دهد که چگونه می توان سبک پیوندهایی را که کلمه "htmlbook" در ویژگی href خود دارند تغییر داد.

مثال 13.5. سبک برای سایت های مختلف

HTML5 CSS 2.1 IE Cr Op Sa Fx

گام به گام | گرافیک برای وب

نتیجه این مثال در شکل نشان داده شده است. 13.5.

برنج. 13.5. تغییر سبک برای پیوندهایی که حاوی "htmlbook" در آدرس هستند

یکی از چندین مقدار مشخصه

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

[ویژگی~="ارزش"] (توضیح قوانین سبک)
Selector[attribute~="value"] (شرح قوانین سبک)

استایل در صورتی اعمال می شود که ویژگی داشته باشد مقدار مشخص شدهیا بخشی از یک لیست مقادیر جدا شده با فاصله است (مثال 13.6).

مثال 13.6. سبک بسته به نام کلاس

HTML5 CSS 2.1 IE Cr Op Sa 5 Fx

در این مثال، اگر نام کلاس لایه روی بلوک تنظیم شده باشد، رنگ متن سبز به انتخابگر H3 اعمال می شود. توجه داشته باشید که اگر به جای ~= از ساختار *= استفاده کنید، نتیجه مشابهی بدست می آید.

خط فاصله در مقدار مشخصه

کاراکتر خط فاصله (-) در نام شناسه و کلاس مجاز است و به شما امکان می دهد مقادیر معنی داری برای ویژگی های id و class ایجاد کنید. برای تغییر سبک عناصری که از خط فاصله در مقدار خود استفاده می کنند، از نحو زیر استفاده کنید.

[ویژگی|=مقدار] (توضیح قوانین سبک)
انتخابگر[ویژگی|=مقدار»] (شرح قوانین سبک)

این سبک برای عناصری اعمال می شود که ویژگی آنها با مقدار مشخص شده یا با قطعه ای از مقدار به دنبال خط فاصله شروع می شود (مثال 13.7).

مثال 13.7. خط فاصله در مقادیر

HTML5 CSS 2.1 IE Cr Op Sa Fx

در این مثال، نام کلاس روی block-menu-therm تنظیم شده است، بنابراین استایل ها از ساختار |="block" استفاده می کنند زیرا مقدار با این کلمه شروع می شود و خط فاصله در مقدار وجود دارد.

همه این روش ها را می توان با یکدیگر ترکیب کرد و یک سبک را برای عناصری که شامل دو یا چند ویژگی هستند تعریف کرد. در چنین مواردی، براکت های مربع متوالی هستند.

[attribute1="value1"][attribute2="value2"] (شرح قوانین سبک)
Selector[attribute1="value1"][attribute2="value2"] (شرح قوانین سبک)

سوالات برای بررسی

1. باید رنگ پس زمینه فیلد متن را تنظیم کنید. چه سبکی برای این منظور مناسب است؟

1. ورودی (پس‌زمینه: #acdacc؛ )
2. ورودی (پس‌زمینه: #acdacc؛ )
3. ورودی (پس‌زمینه: #acdacc؛ )
4. ورودی (پس‌زمینه: #acdacc؛ )
5. ورودی (پس‌زمینه: #acdacc؛ )

2. برای تغییر رنگ متن فقط پاراگراف دوم از کدام سبک باید استفاده کرد؟

پراگراف اول

پاراگراف دوم

بند سوم

1. P (رنگ: قرمز؛ )
2. P (رنگ: قرمز؛ )
3. P (رنگ: قرمز؛ )
4. P (رنگ: قرمز؛ )
5. P (رنگ: قرمز؛ )

3. استایل زیر برای کدام عنصر اعمال خواهد شد؟

(پس زمینه: #666؛ )

Lorem ipsum dolor sit amet

1. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

2. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

پاسخ ها

1. ورودی (پس‌زمینه: #acdacc؛ )

2. P (رنگ: قرمز؛ )

3.

با وجود انعطاف‌پذیری و تنوع، انتخابگرهای ویژگی در CSS به ندرت استفاده می‌شوند. اگرچه استفاده از آنها فرصت های بسیار خوبی را برای توسعه دهندگان وب فراهم می کند. آنها به شما این امکان را می دهند که ویژگی های یک عنصر را با یک ویژگی مشخص و علاوه بر این، با یک مقدار خاص تغییر دهید. بسته به نتیجه ای که می خواهید به دست آورید، نحو های مختلفی برای انتخابگرهای ویژگی استفاده می شود.

انتخابگر صفت ساده

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

[ویژگی] (ویژگی 1: مقدار؛ ...) انتخابگر [ویژگی] (ویژگی 1: ارزش؛ ...)

به عنوان مثال، سعی کنید یک خط مانند این را در شیوه نامه خود بنویسید:

P (رنگ: قرمز؛ /* رنگ متن */)

رنگ متن تنها در صورتی تغییر می کند که ویژگی align text به تگ p اعمال شود

صفت با ارزش

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

[attribute="value"] ( milk1: value; ... ) selector [attribute="value"] (property1: value; ...)

به عنوان مثال، در عمل می توان موارد زیر را اعمال کرد:

P ( رنگ: قرمز؛ /* رنگ متن */ ) p ( رنگ: آبی؛ /* رنگ متن */ )

مقدار مشخصه با یک متن خاص شروع می شود

این روش تنظیم یک سبک را می توان به عنوان مثال برای پیوندها یا سایر عناصری که مقادیر مشخصه آنها با نام های خاصی شروع می شود اعمال کرد. مثلا:

Img (حاشیه: 15 پیکسل خودکار؛ )

نحو برای این روش تنظیم سبک ها به شرح زیر است:

[ویژگی^="مقدار"] ( خاصیت 1: ارزش; ... ) انتخابگر [ویژگی^=مقدار"] ( خاصیت 1: ارزش؛ ... )

مقدار مشخصه با یک متن خاص به پایان می رسد

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

[ویژگی$="value"] ( خاصیت 1: ارزش; ... ) انتخابگر [ویژگی$="مقدار"] ( خاصیت 1: ارزش؛ ... )

می توانید از این روش به صورت زیر استفاده کنید:

Img (/* اگر وضوح فایل تصویر به .png ختم شود */ margin:10px خودکار؛ ) a ( /* اگر پیوند به .com ختم شود */ padding-right: 25px; )

مقدار مشخصه حاوی متن مشخص شده است

مواقعی وجود دارد که شما نیاز دارید برای پیوندهای خاصی که متن یکسانی را در نام مقدار مشخصه دارند، سبک تنظیم کنید. نحو نوشتن به شرح زیر است:

[ویژگی*="مقدار"] (ویژگی 1: ارزش؛ ... ) انتخابگر [ویژگی*="مقدار"] ( خاصیت 1: ارزش؛ ... )

به عنوان مثال، من از یک سبک برای تغییر ظاهر پیوندهایی که در آن نام "sdcvoy" ظاهر می شود استفاده کردم:

وب سایت خود ساخته | زبان HTML | موتور جستجوی معروف

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

یکی از چندین مقدار مشخصه

اغلب هنگام تعیین ویژگی ها، فهرستی از چندین مقدار وجود دارد که با یک فاصله از هم جدا شده اند. همانطور که احتمالا قبلاً حدس زده اید، می توانید ویژگی های سبک را برای یک مقدار واحد تنظیم کنید. سینتکس این روش به صورت زیر است:

[ویژگی~="مقدار"] (ویژگی 1: ارزش؛ ... ) انتخابگر [ویژگی~="مقدار"] ( خاصیت 1: ارزش؛ ... )

پیشنهاد می کنم به یک مثال کوچک نگاه کنید:

سربرگ قرمز

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

خط فاصله در مقدار مشخصه

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

Div a ( رنگ: سبز؛ /* رنگ پیوند */ بالشتک: 15 پیکسل؛ /* حاشیه */ )

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

[ویژگی|=مقدار] ( خاصیت 1: ارزش؛ ... ) انتخابگر [ویژگی|=مقدار»] ( خاصیت 1: ارزش؛ ... )

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

CSS یک ابزار قدرتمند برای توسعه وب است. این به ما امکان می دهد تقریباً تمام ایده ها و ایده های خود را زنده کنیم.

یکی از مزیت های مهم CSS این است که می توان استایل ها را برای همه عناصر از یک نوع صفحه اعمال کرد. برای استفاده موثر از این ویژگی، باید درک خوبی از آن داشته باشید انتخابگرهای CSS. انتخابگر دقیقاً همان چیزی است که یک قانون برای آن اعمال می شود.

انواع مختلفی از انتخابگرهای CSS وجود دارد. بیایید به بررسی این انواع و نمونه هایی از کاربرد آنها بپردازیم.

انتخابگر جهانی

یک انتخابگر جهانی سبک تمام عناصر سند را مشخص می کند. با یک ستاره (*) نشان داده شده است. به عنوان مثال، این مشخص می کند که همه عناصر قرمز خواهند بود:

* (رنگ: قرمز؛)

انتخابگرهای عنصر

هنگام نوشتن سبک برای یک سند HTML، عناصر تگ های HTML (h1، p، img، a، body...) هستند. مثلا:

H1 (فونت-خانواده: Verdana؛ اندازه قلم: 12 پیکسل؛ رنگ: #666؛ )

که در در این موردتمام عناوین سطح اول سند با فونت Verdana، اندازه 12 پیکسل و رنگ خاکستری خواهند بود.

انتخاب کنندگان کلاس

این انتخابگر به شما امکان می دهد بدون توجه به نوع عنصر، یک سبک را اختصاص دهید. اما برای اینکه آنها کار کنند، باید چند یادداشت به کد HTML اضافه کنید، یعنی ویژگی class با مقداری که هنگام ایجاد قانون CSS از آن استفاده خواهید کرد.

فرض کنید باید چند تصویر را در یک صفحه قاب کنید. این تصاویر دارای ویژگی کلاس هستند. مثلا:

و در فایل style قانون را می نویسیم:

Border_img (حاشیه: 1px جامد #00f;)

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

انتخابگرهای شناسه

همچنین به شما این امکان را می دهد که بدون توجه به نوع عنصر، یک سبک را اختصاص دهید. اما بر خلاف انتخابگر کلاس، فقط یک بار در یک سند قابل استفاده است. با نماد هش (#) نشان داده شده است. تگ دارای ویژگی id است. مثلا:

انتخابگرهای صفت

برای انتخاب عناصر بر اساس ویژگی های آنها و همچنین مقادیر این ویژگی ها استفاده می شود.

برای انتخاب یک عنصر با ویژگی آن، صرف نظر از مقدار این ویژگی، از ساختار زیر استفاده کنید: [خصیصه] . به عنوان مثال، ما باید تصاویری را با یک قاب قرمز که دارای مجموعه ویژگی alt هستند علامت گذاری کنیم. ما این کار را انجام می دهیم:

img (حاشیه: 1 پیکسل قرمز ثابت؛)

شما فقط می توانید برچسب هایی را انتخاب کنید که ویژگی های آنها معنای خاصی دارند. به عنوان مثال، شما باید این قانون را برای همه تگ ها با یک ویژگی type که مقدار آن متن است اعمال کنید - اندازه متن 16 پیکسل است. این کار به صورت زیر انجام می شود:

(اندازه قلم: 16 پیکسل؛)

اگر می خواهید عناصری را انتخاب کنید که ویژگی کلاس آنها حاوی کلمه img باشد، از کد زیر استفاده کنید:

(حاشیه: 5 پیکسل؛)

اگر نیاز به انتخاب ویژگی دارید که مقدار آن با مقداری متن شروع می شود:

(رنگ:#009);

اگر شما نیاز به انتخاب ویژگی دارید که مقدار آن با متنی به پایان می رسد:

(اندازه فونت: 10 پیکسل؛)

اگر شما نیاز به انتخاب ویژگی دارید که مقدار آن حاوی مقداری متن است:

(رنگ پس زمینه:#0cc؛)

انتخابگرهای نسل (انتخابگرهای زمینه)

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

انتخابگرهای عنصر خواهر و برادر

برای انتخاب عناصر همسایه که در یک سطح قرار دارند و والد مشابهی دارند، این کار را انجام دهید:

برای انتخاب عناصر, واقع شدهدر یک سطح، با داشتن یک والدین این کار را انجام می دهیم.

تگ های همسایه در این مورد قوی و em و همچنین em و a هستند.

انتخابگرهای شبه کلاس

شبه کلاس یک کلاس فانتوم است که وجود آن به وضعیت عنصر یا ساختار سند به عنوان یک کل بستگی دارد. شبه کلاس ها اغلب در عناصر فرم ورودی یا برای تعریف رفتار پیوندها یا عناصر فعال استفاده می شوند.

به عنوان مثال، شما باید رنگ پیوندهای بازدید شده را تغییر دهید:

A:بازدید شده (رنگ:#933;)

یا به عنوان مثال، هنگامی که فوکوس (مکان نما) روی قسمت متن فرم قرار می گیرد، رنگ متن را تغییر دهید:

ورودی: فوکوس (رنگ: قرمز؛)

انتخابگرهای شبه عنصر

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

CSS2 4 شبه عنصر را تعریف می کند: حرف اول (:first-letter)، خط اول (:first-line) و اعمال سبک های خاص قبل از (:before) و بعد (:after) عنصر.

به عنوان مثال، حرف اول هر پاراگراف را طوری تنظیم کنیم که سبک خاص خود را داشته باشد:

P: حرف اول (فونت-خانواده: Verdana، Geneva، sans-serif؛ اندازه قلم: 12px؛ رنگ: #333؛ )

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

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

بله، و طبق معمول به شما می گویم - اگر در آن مهارت دارید، حتی سعی نکنید همه چیزهایی را که در زیر نوشته شده حفظ کنید. :) شما باید یک چیز را از این درس به خاطر بسپارید - آنچه در پاراگراف اول نوشته شده است. بقیه را فقط باید بفهمید و بفهمید. بنابراین.

نحو انتخابگر صفت

برای اعمال سبک‌ها به عناصر با ویژگی خاص، باید این ویژگی را در براکت مربع مشخص کنید.

[صفت] ( دارایی: ارزش; ...)

برای اینکه استایل ها بر روی عناصری اعمال شوند که نه فقط یک ویژگی خاص، بلکه یک ویژگی با یک مقدار خاص دارند، باید علامت مساوی (=) را بعد از ویژگی و این مقدار بنویسید که می تواند در گیومه قرار گیرد.

[ویژگی = "ارزش"] ( دارایی: ارزش; ...)

برخی از ویژگی‌ها می‌توانند مقادیر متعددی داشته باشند که با فاصله از هم جدا شده‌اند (به عنوان مثال، ویژگی rel یا class یک تگ، که کمی بعد به آن خواهیم پرداخت). بنابراین، برای تنظیم سبک برای عناصری که دارای یکی از مقادیر یکسان در ویژگی ها هستند، باید علائم ~= (تقریباً برابر) را بعد از ویژگی قرار دهید و سپس مقدار مورد نیاز را بنویسید.

[ویژگی~=مقدار"] ( دارایی: ارزش; ...)

گزینه چهارم برای ویژگی هایی در نظر گرفته شده است که مقدار آنها ممکن است شامل چندین کلمه باشد که با خط فاصله از هم جدا شده اند (مثلاً همان کلاس). و به شما این امکان را می دهد که استایل ها را برای همه عناصری که کلمه اول آنها در مقدار مشخصه یکسان است اعمال کنید. به عنوان مثال، class="block-left" و class="block-right". همان بخش در اینجا بلوک است، بنابراین می توان از آن به عنوان یک مقدار استفاده کرد.

[ویژگی|="مقدار"] ( دارایی: ارزش; ...)

روش پنجم استایل‌ها را به عناصری متصل می‌کند که مقادیر ویژگی‌های آنها با همان متن شروع می‌شود. به عنوان مثال، src= "images/bird.png" و src= "images/cat.jpg". در اینجا همان قسمت تصاویر/ یا تصاویر یا تصویر و غیره است. این قسمت یکسان است که به عنوان مقدار ثبت می شود.

[ویژگی^=مقدار"] ( دارایی: ارزش; ...)

مشابه پنجم، اما در اینجا انتخاب بر اساس بخشی از متن است که برعکس، با مقادیر ویژگی به پایان می رسد. فرض کنید src= "image/bird.png" و src= "picture/dog.png" . واضح است که قسمت png. در اینجا یکسان است.

[خصیصه$="value"] ( دارایی: ارزش; ...)

اگر لازم است عناصری را انتخاب کنید که مقادیر مشخصه آنها قسمت یکسانی از متن دارند و فرقی نمی کند مقادیر کجا هستند، از این روش استفاده می شود. برای مثال، href= "http://site/css/" و href= "http://www.site/html/". اینجا همان قسمت "سایت" است. بنابراین، برای مثال، می توانید تمام لینک های منتهی به یک سایت خاص را انتخاب کنید.

[ویژگی*="ارزش"] ( دارایی: ارزش; ...)

متأسفانه اینترنت اکسپلورر 6.0 اصلاً انتخابگرهای ویژگی را درک نمی کند.

مثالی از استفاده از انتخابگرهای ویژگی در CSS

نتیجه در مرورگر