تم إنشاء c4a.dev لمساعدتك على التركيز أثناء مُشاهدة الكورسات والإبتعاد عن إزعاج اليوتيوب (تعلم بروقااان👌)
كيفية الشراء من الموقع

منطقة إعلانية

يُمكننا وضع إعلانك هنا 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك

سعر الإعلان 3$ فى اليوم الواحد

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 !!

يعنى انت مش مُنتسب فى القناة ولا مُشترك فى كورس يوديمى وكمان مشغل الأدبلوك فى الموقع !! 😢