path: root/files/ar/web/css/attribute_selectors/index.html

---
title: Attribute selectors
slug: Web/CSS/Attribute_selectors
tags:
  - Attribute
  - Attribute selectors
  - CSS
  - CSS 3
  - CSS 3 Attribute selectors
  - CSS Attributes
  - Identifying Elements
  - Identifying Nodes
  - Selecting Elements
  - Selectors
  - محدد الخاصية
  - محددات
translation_of: Web/CSS/Attribute_selectors
---
<div>{{CSSRef}}</div>

<p dir="rtl">يطابق<em><strong> محدد خاصية</strong></em> CSS عناصر تستند إلى وجود أو قيمة لخاصية معينة.</p>

<pre class="brush: css no-line-numbers">/* &lt;a&gt; elements with a title attribute */
a[title] {
  color: purple;
}

/* &lt;a&gt; elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* &lt;a&gt; elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* &lt;a&gt; elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}</pre>

<dl>
 <dt dir="rtl"><code>[<em>attr</em>]</code></dt>
 <dd dir="rtl">يمثل عناصر ذات اسم خاصية attr.</dd>
 <dt dir="rtl"><code>[<em>attr</em>=<em>value</em>]</code></dt>
 <dd dir="rtl">يمثل العناصر التي تحتوي على اسم خاصية attr التي قيمتها هي ذات القيمة بالضبط.</dd>
 <dt dir="rtl"><code>[<em>attr</em>~=<em>value</em>]</code></dt>
 <dd dir="rtl">يمثل العناصر التي تحتوي على اسم خاصية attr التي تكون قيمتها قائمة كلمات مفصولة بمسافات بيضاء ، واحدة منها هي القيمة بالضبط.</dd>
 <dt dir="rtl"><code>[<em>attr</em>|=<em>value</em>]</code></dt>
 <dd dir="rtl">يمثل عناصر ذات اسم خاصية attr يمكن أن تكون قيمتها ذات قيمة بالضبط أو يمكن أن تبدأ بالقيمة مباشرة متبوعة بواصلة ، - (U + 002D).</dd>
 <dd dir="rtl">وغالبًا ما يتم استخدامه لمطابقة اللغة الفرعية.</dd>
 <dt dir="rtl"><code>[<em>attr</em>^=<em>value</em>]</code></dt>
 <dd dir="rtl">يمثل عناصر ذات اسم خاصية attr التي تكون قيمتة تماثل اول القيمة</dd>
 <dd dir="rtl">(يبحث عن تماثل في بداية القيمة).</dd>
 <dt dir="rtl"><code>[<em>attr</em>$=<em>value</em>]</code></dt>
 <dd dir="rtl">يمثل العناصر ذا اسم الخاصية attr التي تكون قيمته تماثل آخر القيمة</dd>
 <dd dir="rtl">(يبحث عن تماثل في نهاية القيمة)</dd>
 <dt dir="rtl"><code>[<em>attr</em>*=<em>value</em>]</code></dt>
 <dd dir="rtl">يمثل عناصر ذات اسم خاصية attr تحتوي قيمتها على تواجد واحد على الأقل للقيمة</dd>
 <dd dir="rtl">داخل قيمة الخاصية.</dd>
 <dt dir="rtl" id="case-insensitive"><code>[<em>attr</em> <em>operator</em> <em>value</em> i]</code></dt>
 <dd dir="rtl">تؤدي إضافة حرف (i) أو (I) قبل قوس الإغلاق إلى مقارنة القيمة بحالة غير حساسة  (للأحرف ضمن نطاق ASCII).</dd>
</dl>

<h2 dir="rtl" id="أمثلة">أمثلة</h2>

<h3 dir="rtl" id="روابط">روابط</h3>

<h4 dir="rtl" id="CSS">CSS</h4>

<pre class="brush: css">a {
  color: blue;
}

/*  "#" الروابط الداخلية ، تبدأ بـ*/
a[href^="#"] {
  background-color: gold;
}

/*  URL روابط مع "example" في أي مكان في عنوان */
a[href*="example"] {
  background-color: silver;
}

/* URL روابط "غير حساسة" في أي مكان في عنوان ،
    بغض النظر عن الكتابة بحرف كبير*/
a[href*="insensitive" i] {
  color: cyan;
}

/* ".org"الروابط التي تنتهي بـ  */
a[href$=".org"] {
  color: red;
}
</pre>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;&lt;a href="#internal"&gt;Internal link&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://example.com"&gt;Example link&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#InSensitive"&gt;Insensitive internal link&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://example.org"&gt;Example org link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>

<h4 dir="rtl" id="Result">Result</h4>

<p dir="rtl">{{EmbedLiveSample('Links')}}</p>

<h3 dir="rtl" id="لغات">لغات</h3>

<h4 dir="rtl" id="CSS_2">CSS</h4>

<pre class="brush: css">/* All divs with a `lang` attribute are bold. */
div[lang] {
  font-weight: bold;
}

/* All divs in US English are blue. */
div[lang~="en-us"] {
  color: blue;
}

/* All divs in Portuguese are green. */
div[lang="pt"] {
  color: green;
}

/* All divs in Chinese are red, whether
   simplified (zh-CN) or traditional (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* All divs with a Traditional Chinese
   `data-lang` are purple. */
/* Note: You could also use hyphenated attributes
   without double quotes */
div[data-lang="zh-TW"] {
  color: purple;
}
</pre>

<h4 dir="rtl" id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;div lang="en-us en-gb en-au en-nz"&gt;Hello World!&lt;/div&gt;
&lt;div lang="pt"&gt;Olá Mundo!&lt;/div&gt;
&lt;div lang="zh-CN"&gt;世界您好！&lt;/div&gt;
&lt;div lang="zh-TW"&gt;世界您好！&lt;/div&gt;
&lt;div data-lang="zh-TW"&gt;?世界您好！&lt;/div&gt;
</pre>

<h4 dir="rtl" id="Result_2">Result</h4>

<p dir="rtl">{{EmbedLiveSample('Languages')}}</p>

<h2 dir="rtl" id="مواصفات">مواصفات</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th dir="rtl" scope="col">مواصفات</th>
   <th dir="rtl" scope="col"><span style="display: none;"> </span>الحالة</th>
   <th scope="col">تعليق</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>يضيف المعدل ل ASCII اختيار قيمة خاصية غير حساسة لحالة الأحرف</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>التعريف الأولي</td>
  </tr>
 </tbody>
</table>

<h2 dir="rtl" id="توافق_المتصفح">توافق المتصفح</h2>



<p>{{Compat("css.selectors.attribute")}}</p>

<h2 id="See_also">See also</h2>

<ul>
 <li>Selecting a single element: {{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}}, or {{domxref("Element.querySelector()")}}</li>
 <li>Selecting all matching elements: {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}}, or {{domxref("Element.querySelectorAll()")}}</li>
 <li>The above methods are all implemented based on the {{domxref("ParentNode")}} mixin; see {{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li>
</ul>