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

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

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 يعني !!!🤓


Do not waste your time and start with us, now 😍