با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در بخش های قبلی شما را با انتخابگرهای عنصر و کلاس آشنا کردیم و چگونگی دسترسی به عناصر هم جوار ، فرزند و هم سطح را بررسی کردیم، همچنین دسترسی به رویدادها و وضعیت های مختلف عناصر در CSS و تعریف style برای آن ها را نیز ارائه کردیم. دسته ای دیگر از انتخابگرها هستند که به شما اجازه ی دسترسی به عناصر از طریق صفات آن ها را می دهند، که به عنوان Attribute Selectors در CSS و یا به زبان ساده تر انتخابگرهای صفت در CSS شناخته می شوند. در این آموزش ما به شما چگونگی استفاده از انتخابگرهای صفت در CSS برای دسترسی به عنصر مختلف از طریق صفات آن ها را بررسی کرده ایم.
در این آموزش ما به طورکلی ساختار استفاده از Attribute Selectors در CSS و حالات مختلف آن را بررسی می کنیم.
انتخابگر [attribute]
برای انتخاب انواع عناصر HTML با استفاده از صفات آن ها بکار می رود.
مثال زیر تمام عناصر <a> را با یک صفت target انتخاب می کند:
انتخابگر [attribute="value"]
عناصر HTML را با استفاده از یک صفت و مقدار مشخص آن، انتخاب می کند.
مثال زیر تمام عناصر <a> را با صفت target="_blank"
انتخاب می کند:
انتخابگر [attribute~="value"]
یک عنصر HTML را که شامل مقدار صفت انتخابگر باشند را انتخاب می کند.
مثال زیر border تمام عناصری که title آنها شامل کلمه “flower” باشند را با ضخامت ۵px و رنگ زرد مشخص می کند:
انتخابگر [attribute|="value"]
برای انتخاب عناصری استفاده می شود که اول مقدار صفت مشخص شده در آن ها با مقدار صفت انتخابگر برابر باشد.
مثال زیر تمام عناصری را انتخاب می کند که ابتدای صفت class آن ها با مقدار “top” برابر باشد.
نکته : حتما باید صفت مشخص شده در عناصر شامل تمام مقدار مشخص شده ( “top”) باشد و اینکه شامل یک حرف از آن بوده یا چسبیده به مقدار دیگری باشد کافی نیست.
انتخابگر [attribute^="value"]
برای انتخاب عناصری استفاده می شود که مقدار صفت مشخص شده در آن ها با مقدار صفت انتخابگر شروع شده باشد.
مثال زیر تمام عناصری را انتخاب می کند که صفت class آن ها با مقدار “top” شروع شده باشد.
نکته : در این انتخابگر لازم نیست که مقدار صفت عناصر شامل کل مقدار مشخص شده باشد.
انتخابگر [attribute$="value"]
برای انتخاب عناصری استفاده می شود که صفت مشخص شده در آن ها با مقدار مشخص شده تمام شده باشد.
مثال زیر تمام عناصری را انتخاب می کند که صفت class آن ها با مقدار”test” تمام شده باشد.
نکته : در این حالت لازم نیست که مقدار صفت مشخص شده در عنصر شامل کل مقدار مشخص شده باشد.
انتخابگر [attribute*="value"]
برای انتخاب صفاتی استفاده می شود که صفات مشخص شده در آن ها با مقدار صفت انتخابگر شروع شده باشد.
در مثال زیر تمام عناصری که صفت class آنها با مقدار “te” شروع شده باشد انتخاب می شوند.
نکته : در این حالت لازم نیست که مقدار صفت مشخص شده در عنصر شامل کل مقدار مشخص شده باشد.
با استفاده از Attribute Selectors در CSS می توانیم عناصر فرم ها را بدون استفاده از class یا ID طراحی کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 | input[type="text"] { width: 150px; display: block; margin-bottom: 10px; background-color: yellow; } input[type="button"] { width: 120px; margin-left: 35px; display: block; } |
انتخابگرهای صفت در CSS یکی از روش های رایج دسترسی به عناصر HTML و تعریف Style برای آنها بدون استفاده از class یا ID است، با استفاده از Attribute Selectors در CSS دسترسی به عناصر سریع تر و حجم کدهای html نیز کاهش می یابد.