36- تحديد عناصر HTML باستخدام خصائص CSS

تنسيق عناصر HTML بناءً على خصائص معينة

من الممكن تنسيق عناصر HTML التي تحتوي على خصائص معينة أو قيم خاصة لتلك الخصائص.

محدد السمات في CSS [attribute]

يستخدم محدد السمات [attribute] لتحديد العناصر التي تحتوي على سمة (خاصية) محددة.

على سبيل المثال، يختار الكود التالي جميع عناصر <a> التي تحتوي على سمة target:

a[target] {
  background-color: yellow;
}

تحديد عناصر HTML باستخدام قيمة سمة معينة في CSS [attribute=”value”] Selector

يحدد محدد السمات [attribute="value"] العناصر التي تحتوي على سمة (خاصية) محددة وقيمة محددة لتلك السمة.

على سبيل المثال، يختار الكود التالي جميع عناصر <a> التي تحتوي على سمة target وقيمة “_blank” لهذه السمة:

a[target="_blank"] {
  background-color: yellow;
}

تحديد عناصر HTML باستخدام قيمة سمة تحتوى على كلمة معينة في CSS [attribute~=”value”] Selector

يحدد محدد السمات [attribute~="value"] العناصر التي تحتوي على سمة (خاصية) محددة، وتحتوي قيمة تلك السمة على كلمة معينة (ضمن قائمة من الكلمات قد تفصلها مسافات).

على سبيل المثال، يختار الكود التالي جميع العناصر التي تحتوي على سمة title، وتحتوي قيمة سمة title على كلمة “flower” (بحيث يمكن أن تكون ضمن جملة أو عبارة أخرى):

[title~="flower"] {
  border: 5px solid yellow;
}

تحديد عناصر HTML باستخدام قيمة سمة تبدأ بكلمة معينة في CSS [attribute|=”value”] Selector

يحدد محدد السمات [attribute|="value"] العناصر التي تحتوي على سمة (خاصية) محددة، حيث يمكن لقيمة تلك السمة أن تكون مطابقة تمامًا للقيمة المحددة أو أن تبدأ بتلك القيمة يليها شرطة (-).

ملاحظة: يجب أن تكون القيمة كلمة كاملة، إما بمفردها (مثل: class="top") أو تتبعها شرطة (-) (مثل: class="top-text").

على سبيل المثال، لنفترض أن لديك عناصر <div> تحتوي على سمة class، وتريد استهداف العناصر التي تصنف على أنها “علوية” (top) ولكن تريد أيضًا استهداف العناصر التي لديها تصنيف يبدأ بـ “علوية” (top-) لأغراض التصميم. باستخدام محدد [attribute|="value"]، يمكنك تحقيق ذلك:

[class|="top"] {
  background: yellow;
}

تحديد عناصر HTML باستخدام قيمة سمة تبدأ بقيمة معينة في CSS [attribute^=”value”] Selector

يحدد محدد السمات [attribute^="value"] العناصر التي تحتوي على سمة (خاصية) محددة، حيث تبدأ قيمة تلك السمة بالقيمة المحددة.

على سبيل المثال، لنفترض أن لديك عناصر مختلفة تحتوي على سمة class، وتريد استهداف العناصر التي تبدأ تصنيفها بكلمة “top” بغض النظر عما يليها. باستخدام محدد [attribute^="value"]، يمكنك تحقيق ذلك:

[class^="top"] {
  background: yellow;
}

تحديد عناصر HTML باستخدام قيمة سمة تنتهي بقيمة معينة في CSS [attribute$=”value”] Selector

يحدد محدد السمات [attribute$="value"] العناصر التي تحتوي على سمة (خاصية) محددة، حيث تنتهي قيمة تلك السمة بالقيمة المحددة.

على سبيل المثال، لنفترض أن لديك عناصر مختلفة تحتوي على سمة class، وتريد استهداف العناصر التي تنتهي تصنيفها بكلمة “menu” بغض النظر عما يسبقها. باستخدام محدد [attribute$="value"]، يمكنك تحقيق ذلك:

[class$="test"] {
  background: yellow;
}

تحديد عناصر HTML باستخدام قيمة سمة تحتوى على كلمة معينة في CSS [attribute*=”value”] Selector

يحدد محدد السمات [attribute*="value"] العناصر التي تحتوي على سمة (خاصية) محددة، وتحتوي قيمة تلك السمة على كلمة معينة (ضمن سلسلة أحرف أخرى).

على سبيل المثال، لنفترض أن لديك عناصر مختلفة تحتوي على سمة class، وتريد استهداف العناصر التي تحتوي على كلمة “text” ضمن قيمة تلك السمة بغض النظر عن موضعها أو الكلمات الأخرى التي ترافقها. باستخدام محدد [attribute*="value"]، يمكنك تحقيق ذلك:

[class*="te"] {
  background: yellow;
}

تنسيق نماذج الاستمارة باستخدام CSS

يمكن أن تكون محددات السمات مفيدة لتنسيق نماذج الاستمارة التي لا تحتوي على فئة (class) أو معرف (ID):

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}