التواجد والقيم المطابقة
الدرس 12 من 15 في دورة محددات CSS على Coddy.
في هذا الدرس، ستتعلم عن محددات وجود السمة والقيمة المحددة. تُستخدم محددات السمات لتحديد العناصر بناءً على وجود أو غياب سمة معينة، أو القيمة المحددة للسمة.
محدد وجود السمة:
يستهدف محدد وجود السمة العناصر التي تحتوي على سمة معينة، بغض النظر عن قيمتها. ويُشار إليه باستخدام أقواس مربعة بداخلها اسم السمة.
مثال:
/* يحدد جميع العناصر التي تحتوي على سمة "target" */
[target] {
color: blue;
}محدد القيمة المحددة:
يستهدف محدد القيمة المحددة العناصر التي تحتوي على سمة معينة وقيمة سمة محددة. ويُشار إليه باستخدام أقواس مربعة بداخلها اسم السمة متبوعاً بعلامة التساوي والقيمة المطلوبة.
مثال:
/* يحدد العنصر الذي يحتوي على سمة "data-type" بقيمة "important" */
[data-type="important"] {
font-weight: bold;
}أمثلة برمجية:
HTML:
<p>This is a <span target="link">link</span> element.</p>
<p data-type="important">This is an important paragraph.</p>CSS:
[target] {
text-decoration: underline;
}
[data-type="important"] {
color: red;
}توضح هذه الأمثلة كيفية عمل محددات سمات CSS من خلال تحديد العناصر بناءً على وجود سماتها أو قيمتها المحددة وتطبيق الأنماط المقابلة عليها.
التحدي
سهللقد تم تكليفك بتنسيق نموذج HTML بسيط باستخدام محددات السمات (attribute selectors).
قم بتطبيق الأنماط التالية باستخدام محددات السمات:
- أضف حدودًا باللون
greenلحقول الإدخال التي تحتوي على السمةtypeالمحددة بـ "text". - قم بتغيير لون الخلفية لحقول الإدخال التي تحتوي على السمة
typeالمحددة بـ "email" إلىlightblue. - اجعل لون النص لحقول الإدخال التي تحتوي على السمة
typeالمحددة بـ "password" هوred.
جرّب بنفسك
<!DOCTYPE html>
<html>
<head>
<title>Styled Form</title>
<style>
/* Apply styles to form fields based on attribute values */
</style>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<label for="email">Email:</label>
<input type="email" name="email" id="email">
<label for="password">Password:</label>
<input type="password" name="password" id="password">
<input type="submit" value="Submit">
</form>
</body>
</html>
جميع دروس محددات CSS
4محددات الخصائص
مقدمة في محددات الخصائصالتواجد والقيم المطابقةمحددات قيم الخصائصمحددات قيم الخصائص 2محددات قيم الخصائص 3