سلکتورهای Attribute در CSS

سلکتورهای Attribute

در چندین جلسه ی قبل، هنگام صحبت در رابطه با selector های مختلف در زبان CSS، بحث سکلتور های attribute به میان آمد و آنجا به شما گفتیم که به علت طولانی بودن بحث این نوع سلکتور ها آن ها را در قسمت جداگانه ای توضیح خواهیم داد. امروز می خواهیم در رابطه با این نوع سلکتور ها صحبت کنیم. ما در زبان HTML می توانیم عناصر را بر اساس attribute هایی که دارند استایل دهی کنیم. برای این کار از سکلتور [attribute] استفاده می کنیم و به جای attribute باید attribute واقعی اش را قرار دهیم. مثال زیر تمام تگ های <a> را هدف قرار داده ایم که attribute ای به نام target داشته باشند:

<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
  background-color: yellow;
}
</style>
</head>
<body>

<p>The links with a target attribute gets a yellow background:</p>

<a href="https://www.roxo.ir/plus">Roxo.ir</a>
<a href="http://www.google.com" target="_blank">google.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

<p dir='rtl'><b>هشدار:</b> برای آنکه این سلکتور در مرورگر Internet Explorer 8 و نسخه های قبل تر آن کار کند باید یک DOCTYPE مشخص شده باشد.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

هشدار: برای آنکه این سلکتور در مرورگر Internet Explorer 8 و نسخه های قبل تر آن کار کند باید یک DOCTYPE خاص مشخص شده باشد.

بر اساس مقدار "attribute="value

استفاده از حالت ["attribute="value] برای مواقعی مناسب است که attribute و مقدار خاصی از آن را مد نظر داشته باشیم. به طور مثال در کد زیر تمام تگ های <a> با target ای را در نظر میگیریم که مقدارشان blank_ باشد:

<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
  background-color: yellow;
}
</style>
</head>
<body>

<p>The link with target="_blank" gets a yellow background:</p>

<a href="https://www.roxo.ir/plus">Roxo.ir</a>
<a href="http://www.google.com" target="_blank">google.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

<p dir='rtl'><b>هشدار:</b> برای آنکه این سلکتور در مرورگر Internet Explorer 8 و نسخه های قبل تر آن کار کند باید یک DOCTYPE مشخص شده باشد.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

استفاده از حالت "attribute~="value

یکی دیگر از حالات این دستور، ["attribute~="value] است. این دستور برای مواقعی خوب است که می خواهید مقدارِ attribute شامل کلمه ی خاصی باشد. به طور مثال در کد زیر گفته ایم تمام عناصری را پیدا کن که title آن ها شامل چندین کلمه باشد که با اسپیس از هم جدا شده اند و یکی از آن کلمات هم flower (به معنی «گُل») باشد:

<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
  border: 5px solid yellow;
}
</style>
</head>
<body>

<p>All images with the title attribute containing the word "flower" get a yellow border.</p>

<img src="https://www.w3schools.com/css/klematis.jpg" title="klematis flower" width="150" height="113">
<img src="https://www.w3schools.com/css/img_flwr.gif" title="flower" width="224" height="162">
<img src="https://www.w3schools.com/css/img_tree.gif" title="tree" width="200" height="358">

</body>
</html>

مشاهده ی خروجی در JSBin

استفاده از حالت "attribute|="value

حالت ["attribute|="value] برای مواقعی خوب است که می خواهید مقدارِ attribute با کلمه ای خاص شروع شود. مثال زیر تمام عناصری را انتخاب می کند که مقدارِ attribute آن با "top" شروع شود:

<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
  background: yellow;
}
</style>
</head>
<body>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

<p dir='rtl'><b>هشدار:</b> برای آنکه این سلکتور در مرورگر Internet Explorer 8 و نسخه های قبل تر آن کار کند باید یک DOCTYPE مشخص شده باشد.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: مقدار این attribute در این دستور باید یک کلمه ی کامل باشد (نه کاراکتر)؛ حالا چه تنها مانند "class="top و چه جدا شده با خط تیره مانند "class="top-text. بنابراین topper دیگر محسوب نمی شود.

تفاوت این حالت با حالت قبلی در این است که در دستور قبلی نیازی نبود که مقدار Attribute با چیزی شروع شود، بلکه باید تنها شامل کلمه ی مورد نظر ما می شد اما در این دستور باید حتما با آن شروع شود.

استفاده از حالت "attribute^="value

دستور ["attribute^="value] دقیقا مانند دستور قبلی است با این تفاوت که در این دستور نیازی نیست مقدارِ attribute یک کلمه ی کامل باشد. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
  background: yellow;
}
</style>
</head>
<body>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

<p dir='rtl'><b>هشدار:</b> برای آنکه این سلکتور در مرورگر Internet Explorer 8 و نسخه های قبل تر آن کار کند باید یک DOCTYPE مشخص شده باشد.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

استفاده از حالت "attribute$="value

دستور ["attribute$="value] میگوید attribute ای را پیدا کن که مقدارش با کلمه یا مقدار خاصی تمام شود. مثال زیر تمام عناصری را انتخاب می کند که مقدار attribute آن ها با "test" تمام شود:

<!DOCTYPE html>
<html>
<head>
<style> 
[class$="test"] {
  background: yellow;
}
</style>
</head>
<body>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

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

استفاده از حالت "attribute*="value

دستور ["attribute*="value] برای مواقعی مناسب است که می خواهیم مقدار attribute شامل کاراکتر های خاصی باشد. در مثال زیر گفته ایم تمام عناصری را انتخاب کن که مقدار Attribute آن ها شامل "te" باشد:

<!DOCTYPE html>
<html>
<head>
<style> 
[class*="te"] {
  background: yellow;
}
</style>
</head>
<body>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

مورد استفاده

یکی از استفاده های این نوع سلکتور، استایل دهی فرم هایی است که class یا id خاصی ندارند:

<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}
</style>
</head>
<body>

<form name="input" action="" method="get">
  Firstname:<input type="text" name="Name" value="Peter" size="20">
  Lastname:<input type="text" name="Name" value="Griffin" size="20">
  <input type="button" value="Example Button">
</form>

</body>
</html>

مشاهده ی خروجی در JSBin

شما می توانید خلاقیت به خرج دهید و انواع استفاده های مختلف را برای این سکلتور پیدا کنید. به هر حال امیدوارم از این قسمت لذت برده باشید.