محدد المعرف

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 13 من 76.

يُستخدم محدد المعرف (ID selector) لاستهداف عنصر HTML معين بناءً على قيمة سمة الـ id الخاصة به. وعلى عكس محددات الفئات (class selectors)، التي يمكن استخدامها لتنسيق عناصر متعددة، فإن محددات المعرف (ID selectors) فريدة ولا يمكن تطبيقها إلا على عنصر واحد فقط في الصفحة. وهذا يجعلها مفيدة لتنسيق عناصر فردية بأنماط محددة لا ينبغي تطبيقها على أي عنصر آخر.

لاستهداف عنصر بمعرف (ID) محدد في CSS الخاص بك، يمكنك استخدام رمز الهاش (#) متبوعاً بقيمة المعرف (ID). إليك الصيغة الأساسية لاستخدام محدد المعرف (ID selector):

#idname {
    property: value;
}

على سبيل المثال:

#intro {
    color: blue;
    font-size: 20px;
}

في هذا المثال، يستهدف محدد المعرف #intro العنصر الذي يمتلك المعرف "intro". تقوم التصريحات بتعيين لون النص إلى الأزرق وحجم الخط إلى 20 بكسل لهذا العنصر.

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على عناصر متنوعة، بما في ذلك عنوان (<h1>)، وفقرة (<p>)، وقسم (<div>). مهمتك هي استخدام محدد المعرف (ID selector) لتنسيق عنصر القسم. اتبع الخطوات أدناه:

أضف سمة id بالقيمة "special" إلى عنصر <div>.
اكتب قاعدة CSS باستخدام محدد المعرف (ID selector) يستهدف العنصر الذي يحمل المعرف "special". قم بتعيين لون الخلفية لهذا العنصر إلى yellow ولون النص إلى red.

ورقة مرجعية

يستهدف محدد المعرف (ID selector) عنصر HTML محددًا باستخدام سمة الـ id الخاصة به. محددات الـ ID فريدة ولا يمكن تطبيقها إلا على عنصر واحد فقط في الصفحة.

استخدم رمز الهاش (#) متبوعًا بقيمة الـ ID:

#idname {
    property: value;
}

مثال:

#intro {
    color: blue;
    font-size: 20px;
}

جرّب بنفسك

<html>
<head>
    <title>ID Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>