CSS

Part 2 الأساسيات: اختيارات العناصر (Selectors) – سلسلة FSWD -CSS

ahmedمنذ 4 أسابيع

0 89 3 دقائق

الأساسيات: اختيارات العناصر (Selectors)

الـ CSS Selectors هي طريقة لتحديد العناصر التي تريد تطبيق التنسيق عليها في صفحة الويب. هناك أنواع متعددة من الاختيارات التي تتيح لك التحكم في طريقة استهداف وتنسيق العناصر بشكل دقيق. دعني أشرح لك بعض الأنواع الأساسية التي تستخدمها بشكل متكرر.

أنواع اختيارات العناصر (CSS Selectors):

1. عنصر (Element Selector):

هذا النوع من الاختيارات يستخدم لاختيار جميع العناصر من نوع معين في صفحة الويب.
يتم تحديده باستخدام اسم العنصر HTML مباشرة.

مثال

h1 {
    color: blue;
    font-size: 32px;
}

الشرح:

هذا الكود سيغير اللون والخط لعناصر <h1> في الصفحة.

2. فئة (Class Selector):

يتم استخدام الفئة لتحديد جميع العناصر التي تحتوي على class معين.
يتم تحديده باستخدام النقطة (.) تليها اسم الفئة.

مثال

.button {
    background-color: green;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

الشرح:

هذا الكود سيطبق التنسيق على جميع العناصر التي تحتوي على class باسم .button.

HTML

<button class="button">اضغط هنا</button>

معرف (ID Selector):

يتم استخدام المعرف لتحديد عنصر فريد (تظهر مرة واحدة فقط في الصفحة).
يتم تحديده باستخدام علامة # تليها اسم المعرف.

مثال

#header {
    background-color: lightblue;
    text-align: center;
    padding: 20px;
}

الشرح:

هذا الكود سيطبق التنسيق على العنصر الذي يحتوي على id="header" فقط.

HTML

<div id="header">مرحبًا بك في موقعنا!</div>

4. عام (Universal Selector):

يتم استخدام الاختيار العام (يُعرف بالنجمة *) لاختيار جميع العناصر في الصفحة.
هذا النوع من الاختيارات يستخدم لتطبيق تنسيق على جميع العناصر الموجودة داخل الصفحة.

مثال

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

الشرح:

هذا الكود سيقوم بإلغاء الهوامش والحشو الافتراضي لجميع العناصر في الصفحة ويجعل حساب الحجم يعتمد على border-box.

5. العناصر المتداخلة (Descendant Selector):

يتم استخدام هذا النوع من الاختيارات لاستهداف العناصر المتداخلة داخل عنصر آخر.
يتم تحديده باستخدام مسافة بين العنصر الأم والابن.

مثال

div p {
    color: red;
}

الشرح:

هذا الكود سيطبق التنسيق على جميع عناصر <p> التي توجد داخل عناصر <div>.

HTML

<div>
    <p>هذا النص سيكون باللون الأحمر</p>
</div>

6. اختيارات متعددة (Multiple Selectors):

يمكنك تطبيق نفس التنسيق على عدة عناصر باستخدام فاصلة , بين الاختيارات.

مثال

h1, h2, h3 {
    color: navy;
    font-family: Arial, sans-serif;
}

الشرح:

هذا الكود سيطبق نفس التنسيق على عناصر <h1>, <h2>, و <h3>.

7. اختيارات الصفات (Attribute Selectors):

يتم استخدام هذا النوع لاختيار العناصر بناءً على قيمة صفة معينة.

مثال

input[type="text"] {
    background-color: lightgray;
    padding: 8px;
}

الشرح:

هذا الكود سيطبق التنسيق على جميع عناصر <input> التي تحتوي على type="text".

8. اختيارات الحافة (Pseudo-classes & Pseudo-elements):

Pseudo-classes تستخدم لتحديد الحالة الخاصة للعنصر (مثل عندما يكون العنصر مُحددًا أو عند تحريك المؤشر عليه).
Pseudo-elements تستخدم لتحديد جزء من العنصر (مثل أول حرف من النص أو أول سطر).

مثال على Pseudo-class

a:hover {
    color: red;
}

الشرح:

هذا الكود سيغير لون النص إلى الأحمر عندما يتم تحريك الماوس فوق الروابط (<a>).

مثال على Pseudo-element

p::first-letter {
    font-size: 2em;
    color: green;
}

الشرح:

هذا الكود سيجعل أول حرف في أي عنصر <p> بحجم خط أكبر ولون أخضر

كود مثال كامل:

الآن، سأعطيك مثالاً كاملاً يشمل جميع أنواع الاختيارات التي تم شرحها:

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على CSS Selectors</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>مرحبا بك في عالم CSS!</h1>
    <h2>هذه صفحة تعلم CSS Selectors</h2>
    
    <div id="header">
        <p class="text">هذا النص داخل الـ div ويجب أن يكون لونه أحمر.</p>
    </div>
    
    <p class="text">هذا النص خارج الـ div ويجب أن يكون باللون الأزرق.</p>

    <button class="button">اضغط هنا</button>
    <input type="text" placeholder="اكتب هنا">

</body>
</html>

CSS (styles.css)

/* Element Selector */
h1 {
    color: blue;
    font-size: 36px;
}

h2 {
    color: darkgreen;
}

/* Class Selector */
.text {
    color: red;
    font-size: 20px;
}

/* ID Selector */
#header {
    background-color: lightyellow;
    padding: 20px;
}

/* Universal Selector */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Descendant Selector */
div p {
    font-style: italic;
}

/* Multiple Selectors */
h1, h2 {
    font-family: Arial, sans-serif;
}

/* Attribute Selector */
input[type="text"] {
    background-color: lightgray;
    padding: 8px;
}

/* Pseudo-class */
a:hover {
    color: red;
}

/* Pseudo-element */
p::first-letter {
    font-size: 2em;
    color: green;
}

الشرح:

h1 و h2 سيتم تنسيقهما بألوان وحجم خط مختلف باستخدام Element Selectors.
#header سيتم تنسيقه باستخدام ID Selector.
.text سيستهدف جميع الفقرات ذات class “text”.
* سيزيل الهوامش والتعبئة الافتراضية لجميع العناصر باستخدام Universal Selector.
div p سيجعل النص داخل الفقرات المتواجدة داخل div مائلًا باستخدام Descendant Selector.
input[type="text"] سيستهدف فقط الحقول التي تحتوي على النوع text.
a:hover سيغير لون الروابط عند التمرير عليها باستخدام Pseudo-class.
p::first-letter سيجعل أول حرف من كل فقرة أكبر وباللون الأخضر باستخدام Pseudo-element.