palestinian lives matter. we stand with palestine

css selectors شرح

معني ال selector هو تحديد عنصر معين في ملف ال html لإضافة اكواد ال CSS له.

css simple selectors

مثال رقم 1

اذا أردنا إضافة هذا الكود color: red; الي جميع العناصر الموجود في ملف ال html فإننا نستخدم selector يُسمي *
ويكون الكود النهائي كالتالي:

 
*{color: red;}  

مثال علي ذلك

مثال رقم 2

اذا أردنا إضافة هذا الكود color: red; الي جميع العناصر ال h1 الموجودة في ملف ال html
فيكون الكود كالتالي:

 
h1{color: red;}  
مثال علي ذلك

مثال رقم 3

اذا أردنا إضافة هذا الكود color: red; الي جميع العناصر ال h1 وأيضا جميع العناصر ال p الموجودة في ملف ال html
فيكون الكود كالتالي:

 
h1, p {color: red;}  
مثال علي ذلك

مثال رقم 4

إذا كان كود ال 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;} 

درس كامل عن الفرق بين ال id و ال class

مثال رقم 5

إذا كان الكود كالتالي:

 
p.example {color: red;} 

معني ذلك نفذ هذا الكود color: red; على جميع العناصر p التي تحتوي على class يُسمي example

مثال علي ذلك

CSS Advanced Selectors

مثال رقم 6

 
main p { color: orange; } 

معني ذلك ان يُنفذ هذا الكود على جميع العناصر ال p التي بداخل عنصر ال main

مثال علي ذلك

مثال رقم 7

 
 Main > p { color: orange; }  

معني ذلك ان يُنفذ هذا الكود على جميع العناصر ال p التي تكون مباشرة بداخل عنصر ال main
(direct child)
مثال علي ذلك

مثال رقم 8

 
 main + p { color: orange; } 

- معني ذلك ان يُنفذ هذا الكود على اول عنصر p بعد عنصر ال main مباشرة (عنصر ال p لا يكون داخل ال main)

- وفي هذه الحالة عنصر ال p وعنصر ال main يكون لهم نفس الاب
مثال علي ذلك

مثال رقم 9

 
 main ~ p { color: orange; }  

معني ذلك ان يُنفذ هذا الكود على جميع العناصر العناصر ال p الذي بعد عنصر ال main مباشرة (عنصر ال p لا يكون داخل ال main)

- وفي هذه الحالة عنصر ال p وعنصر ال main يكون لهم نفس الاب
مثال علي ذلك

مثال رقم 10

إذا كان كود ال 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;} 
مثال اخر على ذلك

مثال رقم 11

يُمكننا إضافة محتوي نصي عن طريق لغة ال 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

و نصيحة من اخوك يا صاحبي 🧡

- بص يا صديقي حاول ان تجعل الأكواد الخاصة بك بسيطة قد الإمكان (وليه أصلا تكتب اكواد معقده ؟؟ 🙃 😂 )

- يعني تجنب استخدام ال selectors الغير مُتداولة كثيرا حتى يَسهل على المُبرمجين الأخرين قراءة الاكواد الخاصة بك (متبقاش مبرمج ورخم كمان 😂 😂 )

- ماله ال class يعني !!! 🤓

😡
انت مشغل الـ AdBlock !!

ياريت تقفله لوسمحت 😊 😊

تنبيه هام ✋

إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك