معني ال selector هو تحديد عنصر معين في ملف ال html لإضافة اكواد ال CSS له.
اذا أردنا إضافة هذا الكود color: red; الي جميع العناصر الموجود في ملف ال html فإننا نستخدم selector يُسمي *
ويكون الكود النهائي كالتالي:
*{color: red;}
اذا أردنا إضافة هذا الكود color: red; الي جميع العناصر ال h1 الموجودة في ملف ال html
فيكون الكود كالتالي:
h1{color: red;}
مثال علي ذلكاذا أردنا إضافة هذا الكود color: red; الي جميع العناصر ال h1 وأيضا جميع العناصر ال p الموجودة في ملف ال html
فيكون الكود كالتالي:
h1, p {color: red;}
مثال علي ذلكإذا كان كود ال html كالتالي:
<body>
<p>ali hassan</p>
<p>اتعلم في ساعة</p>
<p>courses 4 Arab</p>
<p>CSS selector</p>
</body>
و أردنا إضافة هذا الكود {color:red} الي العنصر p رقم 2 فإننا نستخدم ال class او ال id لعمل ذلك
طريقة عمل ذلك عن طريق ال class
فيصبح كود ال html كالتالي:
<p>ali hassan</p>
<p class="example">اتعلم في ساعة</p>
<p>courses 4 Arab</p>
<p>CSS selector</p>
ويكون كود ال CSS كالتالي:
.example {color: red;}
طريقة عمل ذلك عن طريق ال id
فيصبح كود ال html كالتالي:
<p>ali hassan</p>
<p class="example">اتعلم في ساعة</p>
<p id="test">courses 4 Arab</p>
<p>CSS selector</p>
ويكون كود ال CSS كالتالي:
#test {color: blue;}
إذا كان الكود كالتالي:
p.example {color: red;}
معني ذلك نفذ هذا الكود color: red; على جميع العناصر p التي تحتوي على class يُسمي example
main p { color: orange; }
معني ذلك ان يُنفذ هذا الكود على جميع العناصر ال p التي بداخل عنصر ال main
مثال علي ذلك
Main > p { color: orange; }
معني ذلك ان يُنفذ هذا الكود على جميع العناصر ال p التي تكون مباشرة بداخل عنصر ال main
(direct child)
مثال علي ذلك
main + p { color: orange; }
- معني ذلك ان يُنفذ هذا الكود على اول عنصر p بعد عنصر ال main مباشرة (عنصر ال p لا يكون داخل ال main)
- وفي هذه الحالة عنصر ال p وعنصر ال main يكون لهم نفس الاب
مثال علي ذلك
main ~ p { color: orange; }
معني ذلك ان يُنفذ هذا الكود على جميع العناصر العناصر ال p الذي بعد عنصر ال main مباشرة (عنصر ال p لا يكون داخل ال main)
- وفي هذه الحالة عنصر ال p وعنصر ال main يكون لهم نفس الاب
مثال علي ذلك
إذا كان كود ال HTML كالتالي:
<ul>
<li>first child of ul</li>
<li>second child of ul</li>
<li>third child of ul</li>
<li>forth and last child of ul</li>
</ul>
وأردنا ان نُنفذ الكود color:orange; على اول عنصر li فقط
فيكون كود ال CSS كالتالي:
ul li:first-child {color: orange;}
مثال اخر على ذلكوإذا أردنا ان نُنفذ الكود color:orange; على اخر عنصر li فقط
فيكون كود ال CSS كالتالي:
ul li:last-child {color: orange;}
مثال اخر على ذلكوإذا أردنا ان نُنفذ الكود color:orange; على العنصر li رقم 3
فيكون كود ال CSS كالتالي:
ul li:nth-child(3) {color: orange;}
مثال اخر على ذلكيُمكننا إضافة محتوي نصي عن طريق لغة ال CSS باستخدام ال ::after وال ::before
مثال علي ذلك إذا كان كود ال HTML كالتالي:
<p>Ali Hassan</p>
وأردنا ان يظهر هذا المُحتوي على المتصفح كالتالي: My name is Ali Haasan باستخدام ال CSS
فنلاحظ في هذا المثال إضافة My name is قبلمُحتوي عنصر ال p وبالتالي سوف نستخدم ::before ويكون كود ال CSS كالتالي:
p::before {content: "my name is ";}
ونلاحظ هنا استخدام خاصية ال "content" والتي تكون دائما مع ال ::before وال ::after
مثال علي ::after و مثال علي ::before
معلومة ملهاش لازمة 🤓
ال before وال after زمان كنا بنكتبهم :before و :after ولكن حالياً بعد تطور هذه الأكواد اصبحنا بنكتبهم ب اتنين كولن وليس بكولن واحده كالتالي::after ::before
- يوجد Selector يُسمى :checked ودائما يُستخدم مع عنصر ال <input type="***" >
- فيكون كود ال css كالتالي: input:checked {css كود}
- سيتم شرح هذا المثال في هذا الفيديو
- بص يا صديقي حاول ان تجعل الأكواد الخاصة بك بسيطة قد الإمكان (وليه أصلا تكتب اكواد معقده ؟؟ 🙃 😂 )
- يعني تجنب استخدام ال selectors الغير مُتداولة كثيرا حتى يَسهل على المُبرمجين الأخرين قراءة الاكواد الخاصة بك (متبقاش مبرمج ورخم كمان 😂 😂 )
- ماله ال class يعني !!! 🤓
ياريت تقفله لوسمحت 😊 😊
تنبيه هام ✋
إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك