در چندین جلسه ی قبل، هنگام صحبت در رابطه با selector های مختلف در زبان CSS، بحث سکلتور های attribute به میان آمد و آنجا به شما گفتیم که به علت طولانی بودن بحث این نوع سلکتور ها آن ها را در قسمت جداگانه ای توضیح خواهیم داد. امروز می خواهیم در رابطه با این نوع سلکتور ها صحبت کنیم. ما در زبان HTML می توانیم عناصر را بر اساس attribute هایی که دارند استایل دهی کنیم. برای این کار از سکلتور [attribute] استفاده می کنیم و به جای attribute باید attribute واقعی اش را قرار دهیم. مثال زیر تمام تگ های <a> را هدف قرار داده ایم که attribute ای به نام target داشته باشند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPEhtml>
<html>
<head>
<style>
a[target] {
background-color:yellow;
}
</style>
</head>
<body>
<p>The links withatarget attribute getsayellow background:</p>
<ahref="https://www.roxo.ir/plus">Roxo.ir</a>
<ahref="http://www.google.com"target="_blank">google.com</a>
<ahref="http://www.wikipedia.org"target="_top">wikipedia.org</a>
<pdir='rtl'><b>هشدار:</b>برایآنکهاینسلکتوردرمرورگرInternet Explorer8ونسخههایقبلترآنکارکندبایدیکDOCTYPEمشخصشدهباشد.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
هشدار: برای آنکه این سلکتور در مرورگر Internet Explorer 8 و نسخه های قبل تر آن کار کند باید یک DOCTYPE خاص مشخص شده باشد.
بر اساس مقدار “attribute=”value
استفاده از حالت ["attribute="value] برای مواقعی مناسب است که attribute و مقدار خاصی از آن را مد نظر داشته باشیم. به طور مثال در کد زیر تمام تگ های <a> با target ای را در نظر میگیریم که مقدارشان blank_ باشد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPEhtml>
<html>
<head>
<style>
a[target=_blank] {
background-color:yellow;
}
</style>
</head>
<body>
<p>The link with target="_blank"getsayellow background:</p>
<ahref="https://www.roxo.ir/plus">Roxo.ir</a>
<ahref="http://www.google.com"target="_blank">google.com</a>
<ahref="http://www.wikipedia.org"target="_top">wikipedia.org</a>
<pdir='rtl'><b>هشدار:</b>برایآنکهاینسلکتوردرمرورگرInternet Explorer8ونسخههایقبلترآنکارکندبایدیکDOCTYPEمشخصشدهباشد.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
استفاده از حالت “attribute~=”value
یکی دیگر از حالات این دستور، ["attribute~="value] است. این دستور برای مواقعی خوب است که می خواهید مقدارِ attribute شامل کلمه ی خاصی باشد. به طور مثال در کد زیر گفته ایم تمام عناصری را پیدا کن که title آن ها شامل چندین کلمه باشد که با اسپیس از هم جدا شده اند و یکی از آن کلمات هم flower (به معنی «گُل») باشد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPEhtml>
<html>
<head>
<style>
[title~=flower] {
border:5pxsolidyellow;
}
</style>
</head>
<body>
<p>All images with the title attribute containing the word"flower"getayellow 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” شروع شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPEhtml>
<html>
<head>
<style>
[class|=top] {
background:yellow;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome</h1>
<pclass="top-text">Hello world!</p>
<pclass="topcontent">Are you learning CSS?</p>
<pdir='rtl'><b>هشدار:</b>برایآنکهاینسلکتوردرمرورگرInternet Explorer8ونسخههایقبلترآنکارکندبایدیکDOCTYPEمشخصشدهباشد.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: مقدار این attribute در این دستور باید یک کلمه ی کامل باشد (نه کاراکتر)؛ حالا چه تنها مانند "class="top و چه جدا شده با خط تیره مانند "class="top-text. بنابراین topper دیگر محسوب نمی شود.
تفاوت این حالت با حالت قبلی در این است که در دستور قبلی نیازی نبود که مقدار Attribute با چیزی شروع شود، بلکه باید تنها شامل کلمه ی مورد نظر ما می شد اما در این دستور باید حتما با آن شروع شود.
استفاده از حالت “attribute^=”value
دستور ["attribute^="value] دقیقا مانند دستور قبلی است با این تفاوت که در این دستور نیازی نیست مقدارِ attribute یک کلمه ی کامل باشد. به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPEhtml>
<html>
<head>
<style>
[class^="top"] {
background:yellow;
}
</style>
</head>
<body>
<h1 class="top-header">Welcome</h1>
<pclass="top-text">Hello world!</p>
<pclass="topcontent">Are you learning CSS?</p>
<pdir='rtl'><b>هشدار:</b>برایآنکهاینسلکتوردرمرورگرInternet Explorer8ونسخههایقبلترآنکارکندبایدیکDOCTYPEمشخصشدهباشد.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
استفاده از حالت “attribute$=”value
دستور ["attribute$="value] میگوید attribute ای را پیدا کن که مقدارش با کلمه یا مقدار خاصی تمام شود. مثال زیر تمام عناصری را انتخاب می کند که مقدار attribute آن ها با “test” تمام شود:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPEhtml>
<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>
<pclass="mytest">Thisissome text inaparagraph.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
نکته: در این دستور نیازی نیست که مقدار attribute حتما کلمه ای کامل باشد، بلکه می تواند توالی خاصی از کاراکتر ها نیز باشد.
استفاده از حالت “attribute*=”value
دستور ["attribute*="value] برای مواقعی مناسب است که می خواهیم مقدار attribute شامل کاراکتر های خاصی باشد. در مثال زیر گفته ایم تمام عناصری را انتخاب کن که مقدار Attribute آن ها شامل “te” باشد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPEhtml>
<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>
<pclass="mytest">Thisissome text inaparagraph.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مورد استفاده
یکی از استفاده های این نوع سلکتور، استایل دهی فرم هایی است که class یا id خاصی ندارند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPEhtml>
<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
شما می توانید خلاقیت به خرج دهید و انواع استفاده های مختلف را برای این سکلتور پیدا کنید. به هر حال امیدوارم از این قسمت لذت برده باشید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟