انتخابگرهای ویژگی CSS به شما اجازه می‌دهند تا عناصر HTML را بر اساس وجود یا مقدار یک یا چند ویژگی انتخاب کنید. این‌ها یک روش قدرتمند برای هدفگذاری عناصر خاص در نشانه‌گذاری HTML شما هستند. انتخابگرهای ویژگی در داخل پرانتز مربع [] قرار می‌گیرند و می‌توانند اشکال مختلفی داشته باشند.
بخش‌های زیر راجع به برخی از روش‌های رایج استفاده از انتخابگرهای ویژگی توضیح داده می‌شود:
انتخابگر CSS [attribute] این انتخابگر عناصری را که ویژگی مشخصی دارند، بدون توجه به مقدار آن انتخاب می‌کند.
مثال ساده
در زیر یک مثال برای انتخاب تمام عناصر HTML با ویژگی “data-toggle” آورده شده است:
<html>
<head>
<style>
[data-toggle] {
background: yellow;
color: red;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<div data-toggle="yes">The div with data-toggle attribute</div>
<div>The div without data-toggle attribute</div>
<p data-toggle="no">A paragraph with data-toggle attribute</p>
<p>A paragraph without data-toggle attribute</p>
</body>
</html>در این مثال، تمام عناصر HTML که دارای ویژگی “data-toggle” هستند، با استفاده از انتخابگر [data-toggle] انتخاب شده و با پس‌زمینه زرد و رنگ قرمز استایل داده شده‌اند.
CSS [attribute="value"] Selector
CSS [attribute=”value”] انتخابگری است که عناصری را انتخاب می‌کند که دارای یک ویژگی خاص با یک مقدار خاص هستند.
نحوه استفاده:
[attribute="value"]مثال:
در این مثال، تمام عناصر HTML که دارای ویژگی ‘data-toggle’ با مقدار ‘yes’ هستند، با استفاده از انتخابگر [data-toggle="yes"] انتخاب شده و با پس‌زمینه زرد و رنگ قرمز استایل داده شده‌اند.
<html>
<head>
<style>
[data-toggle="yes"] {
background: yellow;
color: red;
}
</style>
</head>
<body>
<h2>CSS [attribute="value"] Selector</h2>
<div data-toggle="yes">The div with data-toggle attribute</div>
<div>The div without data-toggle attribute</div>
<p data-toggle="no">A paragraph with data-toggle attribute</p>
<p>A paragraph without data-toggle attribute</p>
</body>
</html>در این مثال، تنها عنصری که دارای ویژگی ‘data-toggle’ با مقدار ‘yes’ است، با رنگ زرد و قرمز استایل داده شده است.
CSS [attribute*="value"] Selector
CSS [attribute*=”value”] Selector یک انتخابگر است که عناصری را انتخاب می‌کند که دارای یک ویژگی خاص با یک زیررشته خاص در مقدار آن ویژگی هستند.
نحوه استفاده:
[attribute*="value"]مثال:
در این مثال، با استفاده از انتخابگر [src*="images"]، تمام عناصری که دارای ویژگی “src” هستند و در مقدار مسیر آنها کلمه “images” وجود دارد، با حاشیه متقطع قرمز استایل داده شده‌اند.
<html>
<head>
<style>
[src*="images"] {
border: 2px dashed red;
}
</style>
</head>
<body>
<h2>CSS [attribute*="value"] Selector</h2>
<img alt="Logo" src = "/css/images/logo.png" />
</body>
</html>در این مثال، تصویری که در مسیر آن کلمه “images” وجود دارد با حاشیه متقطع قرمز استایل داده شده است.
CSS [attribute^="value"] Selector
CSS [attribute^=”value”] Selector یک انتخابگر است که عناصری را انتخاب می‌کند که دارای یک ویژگی خاص با یک رشته خاص در ابتدای مقدار آن ویژگی هستند.
نحوه استفاده:
[attribute^="value"]مثال:
در این مثال، با استفاده از انتخابگر [href^="https"]، تمام عناصری که دارای ویژگی “href” هستند و مقدار آن ویژگی با “https” آغاز می‌شود، با پس‌زمینه زرد، بدون خط زیر و با رنگ قرمز استایل داده شده‌اند.
<html>
<head>
<style>
[href^="https"] {
background: yellow;
text-decoration:none;
color:red;
}
</style>
</head>
<body>
<h2>CSS [attribute^="value"] Selector</h2>
<p><a href="https://www.tutorialspoint.com">HTTPS Link</a></p>
<p><a href="http://www.tutorialspoint.com">HTTP Link</a></p>
</body>
</html>در این مثال، لینکی که با “https” آغاز می‌شود، با پس‌زمینه زرد، بدون خط زیر و با رنگ قرمز استایل داده شده است.
CSS [attribute$="value"] Selector
CSS [attribute$=”value”] Selector یک انتخابگر است که عناصری را انتخاب می‌کند که دارای یک ویژگی خاص با یک رشته خاص در انتهای مقدار آن ویژگی هستند.
نحوه استفاده:
[attribute$="value"]مثال:
در این مثال، با استفاده از انتخابگر [src$=".png"]، تمام عناصری که دارای ویژگی “src” هستند و مقدار آن ویژگی با “.png” ختم می‌شود، با یک خط چین معقوص قرمز ایجاد می‌شود.
<html>
<head>
<style>
[src$=".png"] {
border: 2px dashed red;
}
</style>
</head>
<body>
<h2>CSS [attribute$="value"] Selector</h2>
<img alt="Logo" src = "/css/images/logo.png" />
</body>
</html>در این مثال، تصویری که مقدار src آن با “.png” ختم می‌شود، با یک خط چین معقوص قرمز احاطه شده است.
CSS [attribute|="value"] Selector
CSS [attribute|="value"] Selector یک انتخابگر است که عناصری را انتخاب می‌کند که دارای یک ویژگی خاص با یک مقدار خاص است که با یک زیررشته مشخص شده همراه با یک خط تیره (-) آغاز می‌شود. این انتخابگر معمولاً برای انتخاب عناصر با ویژگی‌های خاص زبانی مانند ویژگی‌های lang استفاده می‌شود، که اغلب از خط تیره (-) برای نشان دادن زیرکدهای زبان استفاده می‌کنند.
نحوه استفاده:
[attribute|="value"]در اینجا “attribute” نام ویژگی است که برای عنصر مورد نظر تعریف شده است و “value” زیررشته‌ای است که می‌خواهید با آن مطابقت داشته باشد. اگر مقدار ویژگی با “value-” آغاز شود، عنصر انتخاب می‌شود.
مثال:
در این مثال، با استفاده از انتخابگر [lang|="en"]، تمام عناصری که دارای ویژگی “lang” باشند و مقدار آن با “en” آغاز شود و پس از آن یک خط تیره (-) وجود داشته باشد، انتخاب شده و حاشیه آنها به خط‌چین قرمز تغییر می‌یابد.
<html>
<head>
<style>
[lang|="en"] {
border: 2px dashed red;
}
</style>
</head>
<body>
<h2>CSS [attribute|="value"] Selector</h2>
<div lang="en">Hello World in English!</div>
<div lang="fr">Bonjour tout le monde en français!</div>
<div lang="es">Hola Mundo en español!</div>
</body>
</html>در این مثال، تمام عناصر با ویژگی lang که با “en-” آغاز می‌شوند (مانند “en-US”)، انتخاب شده و حاشیه آنها به خط‌چین قرمز تغییر می‌یابد.
CSS [attribute~="value"] Selector
CSS [attribute~="value"] Selector برای انتخاب عناصری استفاده می‌شود که دارای یک ویژگی خاص با مقداری حاوی یک کلمه مشخص است. این کلمه باید یک کلمه مستقل باشد که توسط فاصله‌ها محاط شده یا در ابتدا یا انتهای مقدار ویژگی باشد.
نحوه استفاده:
[attribute~="value"]در اینجا “attribute” نام ویژگی است که برای عنصر مورد نظر تعریف شده است و “value” کلمه‌ای است که می‌خواهید در مقدار ویژگی با آن مطابقت داشته باشد. اگر مقدار ویژگی حاوی کلمه مورد نظر باشد، عنصر انتخاب می‌شود.
مثال:
در این مثال، با استفاده از انتخابگر [class~="beautifyme"]، تمام عناصری که دارای ویژگی “class” باشند و مقدار آن حاوی کلمه “beautifyme” باشد، انتخاب شده و پس زمینه و حاشیه آنها به رنگ آبی روشن و خط‌چین قرمز تغییر می‌یابد.
<html>
<head>
<style>
[class~="beautifyme"] {
background-color: lightblue;
border: 2px solid red;
}
</style>
</head>
<body>
<h2>CSS [attribute~="value"] Selector</h2>
<div class="beautifyme">div with <b>beautifyme</b> class</div>
<div class="beautifyme1">div with <b>beautifyme1</b> class</div>
<div class="beautifyme-2">div with <b>beautifyme-2</b> class</div>
</body>
</html>در این مثال، تمام عناصری که ویژگی class آنها کلمه “beautifyme” را در مقدار خود دارند (مانند “beautifyme”, “beautifyme1”, “beautifyme-2”)، انتخاب شده و پس زمینه و حاشیه آنها به رنگ آبی روشن و خط‌چین قرمز تغییر می‌یابد.
Attribute Selectors For href Links
این کد CSS از انتخابگرهای ویژگی برای انتخاب لینک‌ها بر اساس ویژگی href استفاده می‌کند. ویژگی href یک ویژگی معمول است که بر روی عناصر <a> استفاده می‌شود تا آدرس URL که لینک به آن اشاره می‌کند را مشخص کند.
در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
ul {
list-style: none;
}
a[href] {
color: rgb(11, 11, 231);
}
a[href="css_backgrounds.htm"] {
color: rgb(224, 152, 18);
}
a[href~="css_colors.htm"] {
color: rgb(51, 255, 0);
}
a[href|="css_padding.htm"] {
color: rgb(0, 255, 255);
}
a[href^="css_margins.htm"] {
color: rgb(255, 0, 55);
}
a[href$="css_lists.htm"] {
color: rgb(255, 230, 0);
}
a[href*="css_borders.htm"] {
color: rgb(112, 108, 108);
}
</style>
</head>
<body>
<ul>
<li> <a href="css_text.htm">CSS Text</a></li>
<li><a href="css_backgrounds.htm">CSS Background</a></li>
<li><a href="css_colors.htm">CSS Color</a></li>
<li><a href="css_padding.htm">CSS Padding</a></li>
<li><a href="css_margins.htm">CSS Margin</a></li>
<li><a href="css_lists.htm">CSS List</a></li>
<li><a href="css_borders.htm">CSS Borders</a></li>
</ul>
</body>
</html>در این مثال، از انتخابگرهای ویژگی CSS برای تغییر رنگ متن لینک‌ها بر اساس مقدار ویژگی href آنها استفاده شده است. هر انتخابگر ویژگی به عنوان یک شرط استفاده می‌شود تا لینک‌های متناظر با آن شرط انتخاب شوند و رنگ آنها تغییر داده شود.
Attribute Selectors For Inputs
این کد CSS از انتخابگرهای ویژگی برای انتخاب المان‌های ورودی بر اساس معیارهای خاصی مانند نوع، نام، مقدار یا سایر ویژگی‌ها استفاده می‌کند.
در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
input {
display: block;
margin: 10px;
}
input[type] {
border: 1px solid #e0dd29;
}
input[placeholder="Password"] {
border: 1px solid #f00;
}
input[name|="emailid"] {
background-color: rgb(236, 178, 233);
}
input[type~="submit"] {
background-color: rgb(88, 241, 88);
padding: 10px;
}
input[value^="But"] {
background-color: rgb(236, 149, 68);
padding: 10px;
}
input[type$="box"] {
border-radius: 5px;
height: 50px;
width: 20px;
}
input[type*="adi"] {
height: 50px;
width: 20px;
}
</style>
</head>
<body>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input type="email" placeholder="Email" name="emailid">
<input type="submit" placeholder="Submit">
<input type="button" value="Button">
<input type="checkbox" placeholder="Checkbox">
<input type="radio" placeholder="Radio">
</body>
</html>در این مثال، می‌توانید المان‌های ورودی را بر اساس نوع، placeholder، نام، مقدار و سایر ویژگی‌های آنها انتخاب کنید و سبک‌های مختلف CSS را به آنها اعمال کنید.
Attribute Selectors For Title
در این بخش، می‌توانید المان‌ها را بر اساس ویژگی عنوان (title attribute) سبک‌دهی کنید. برای این کار از انتخابگر ویژگی CSS به نام title استفاده می‌شود تا المان‌هایی که عنوان حاوی یک مقدار خاص هستند را سبک‌دهی کنید.
در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
span {
display: block;
margin: 10px;
padding: 5px;
}
span[title] {
border: 2px solid rgb(231, 40, 40);
background-color: rgb(109, 177, 236);
}
span[title="CSS Background"] {
border: 2px solid rgb(231, 40, 40);
background-color: rgb(250, 163, 192);
}
span[title|="CSS Border"] {
border: 2px solid rgb(231, 40, 40);
background-color: rgb(245, 248, 79);
}
span[title^="Mar"] {
border: 2px solid rgb(231, 40, 40);
background-color: rgb(255, 147, 23);
}
span[title$="ght"] {
border: 2px solid rgb(231, 40, 40);
background-color: rgb(102, 201, 240);
}
span[title*="CSS Width"] {
border: 2px solid rgb(231, 40, 40);
background-color: rgb(191, 14, 235);
}
</style>
</head>
<body>
<span title="CSS Text">A text refers to a piece of written or printed information in the form of words or characters.</span>
<span title="CSS Background">You can set backgrounds of various HTML elements.</span>
<span title="CSS Border"> border property is used to create a border around an element.</span>
<span title="Margin">Setting up a margin around an HTML element.</span>
<span title="Height">The height property sets the height of an element's content area.</span>
<span title="CSS Width">The width sets the width of an element's content area.</span>
</body>
</html>در این مثال، می‌توانید المان‌ها را بر اساس عنوان‌های مختلف که حاوی مقادیر خاص هستند، انتخاب و سبک‌دهی کنید.
Attribute Selectors For Language
در این بخش، می‌توانید المان‌ها را بر اساس زبان آنها انتخاب کنید. ویژگی lang برای مشخص کردن زبان متن داخل یک المان استفاده می‌شود.
در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
div[lang] {
color: red;
}
div[lang="fr"] {
color: blue;
}
div[lang~="es"] {
color: green;
}
div[lang|="de"] {
color: orange;
}
div[lang^="it"] {
color: purple;
}
div[lang$="ja"] {
color: brown;
}
div[lang*="zh"] {
color: teal;
}
</style>
</head>
<body>
<div lang="en">Hello World in English!</div>
<div lang="fr">Bonjour tout le monde en français!</div>
<div lang="es">Hola Mundo en español!</div>
<div lang="ja">こんにちは、日本語で世界！</div>
<div lang="de">Hallo Welt auf Deutsch!</div>
<div lang="it">Ciao Mondo in italiano!</div>
<div lang="zh">你好世界，中文！</div>
</body>
</html>در این مثال، المان‌ها بر اساس زبان متن داخل آنها انتخاب و سبک‌دهی شده‌اند. به عنوان مثال، المان‌هایی که زبان آنها فرانسوی (fr)، اسپانیایی (es)، آلمانی (de) و غیره است، به ترتیب با رنگ‌های آبی، سبز، نارنجی و … سبک‌دهی شده‌اند.
CSS Multiple Attribute Selectors
در این بخش، می‌توانید المان‌ها را بر اساس چندین مقدار ویژگی انتخاب کنید. این امکان به شما اجازه می‌دهد تا المان‌های خاصی را که شرایط چندگانه را برآورده می‌کنند، انتخاب کنید.
در اینجا یک مثال آورده شده است:
<html>
<head>
<style>
ul {
list-style: none;
}
a[href] {
color: rgb(231, 11, 194);
}
a[href="css_backgrounds.htm"][href$=".htm"] {
color: rgb(224, 152, 18);
}
a[href="css_colors.htm"] {
color: rgb(51, 255, 0);
}
</style>
</head>
<body>
<ul>
<li><a href="css_text.htm">CSS Text</a></li>
<li><a href="css_backgrounds.htm">CSS Background</a></li>
<li><a href="css_colors.htm">CSS Color</a></li>
</ul>
</body>
</html>در این مثال، المان‌ها بر اساس ویژگی‌های href خود انتخاب و سبک‌دهی شده‌اند. به عنوان مثال، المان‌هایی که href آنها برابر با “css_backgrounds.htm” است و در ضمن پایان با “.htm” ختم می‌شود، با رنگ خاصی سبک‌دهی شده‌اند.
CSS Attribute Selectors With Sibling Combinator
در این بخش، ترکیب‌های انتخاب‌کننده ویژگی‌های CSS و ترکیب‌کننده‌های همخواند مورد بررسی قرار می‌گیرند که می‌توانند با یکدیگر استفاده شوند تا المان‌های خاصی را بر اساس ویژگی‌های آنها و رابطه آنها با سایر المان‌ها انتخاب کنند.
ترکیب‌کننده همخواند عمومی (~): این ترکیب‌کننده تمام المان‌های همخواند را که پس از یک المان مشخص دنبال می‌شوند، اما به صورت مستقیم مجاور آن نیستند را انتخاب می‌کند.
نحوه نوشتار:
selector1 ~ selector2 {
/* سبک‌های CSS */
}ترکیب‌کننده همخواند مجاور (+): این ترکیب‌کننده المانی را انتخاب می‌کند که به طور مستقیم پس از المان مشخص شده قرار دارد.
نحوه نوشتار:
selector1 + selector2 {
/* سبک‌های CSS */
}در مثال زیر نشان داده شده است که ترکیب‌کننده همخواند مجاور (+) پاراگراف را به طور مستقیم پس از عنوان انتخاب می‌کند، در حالی که ترکیب‌کننده همخواند عمومی (~) تگ دیو بعد از عنوان را انتخاب می‌کند.
<html>
<head>
<style>
h2 + p {
font-weight: bold;
color:blue;
}
h2 ~ div {
color: red;
}
</style>
</head>
<body>
<h2>CSS Background</h2>
<p>You can set backgrounds of various HTML elements.</p>
<div>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
</div>
<p>There are many variations of passages of Lorem Ipsum available.</p>
</body>
</html>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام