)
)
ماذا يعني الوصول للعناصر؟
لتخصيص مظهر عنصر ما يجب عليك وصف العنصر الذي تريد تخصيصه بدايةً.
في هذه الحلقة على الطرق المختلفة التي يمكنك من سنتعرف خلالها الوصول إلى عنصر.
الوصول المباشر
يكون من خلال ذكر اسم العنصر. يقوم الكود التالي بتلوين النص لكل باللون الأحمر.divعناصر
<body>
<div> Red text </div>
<div> Red text </div>
</body>
div {
color: red;
}
الوصول عن طريق تسمية العنصر
خاصين. جميع العناصر id أو classيكون بتسمية العنصر من خلال معين تأخذ التنسيق المكتوب. classالتي تحوي
للتنسيق لأنه قابل للتكرار على أكثر من عنصرclass* يجب عليك استخدام ال
<body>
<div class="red"> Red text </div>
<div id="yellow"> Yellow text <div>
</body>
.red { color: red; }
#yellow { color: yellow; }
اختيار عنصر بالنسبة لعنصر آخر
ويتم فيه الوصول لعنصر ما عن طريق عنصر آخر.
div > p { }
div + p { }
div ~ p { }
مباشرةdiv اختيار فقرة داخل
مباشرةdivاختيار فقرة تلي
لعنصر أب divاختيار كل فقرة تلي واحد
div p { }
divاختيار فقرة داخل
div div p { }
div.red p { }
* { }
div داخل divاختيار فقرة داخل
يحمل كلاس divاختيار فقرة داخل red
يقوم باختيار جميع العناصر
Pseudo classاختيار عنصر باستخدام
يتم فيه الوصول لعنصر عبر صفة مميزة فيه. من هذه الصفات:
div:active { }
input:focus { }
input:checked { }
عند النقر باستمرار بالفأرةdiv اختيار
اختيار حقل إدخال عند التركيز عليه
أو radioاختيار حقل من نوع عند اختيار هذه العناصرcheckbox
div:hover { }
تمر فوقه الفأرةdivاختيار
input:valid { }
div:dir(rtl) { }
div:lang(ar) { }
اختيار حقل إدخال عندما يكون الإدخال صحيح
rtl الذي يكون اتجاهه divاختيار
عندما تكون اللغة عربيةdivاختيار
اختيار عنصر باستخدام مكانه في الصفحة
ومنها:Pseudo classesتعتبر هذه الصفات أيضاً من ال
div:first-child { }
div:last-of-type { }
div:nth-of-type(3) { }
يكون الابن الأول لعنصر ماdiv اختيار
داخل عنصر ماdivاختيار آخر
يكون الابن الثالث لعنصر ماdiv اختيار
div:first-of-type { }
داخل عنصر ماdivاختيار أول
div:nth-of-type(even) { }
div:is(article div) { }
div:has(p) { }
يكون ذو ترتيب زوجي داخل div اختيار عنصر ما
article الذي يكون داخل divاختيار
داخلهp الذي يملك divاختيار
Pseudo elementsالعناصر المميزة
بدون أن تكون موجودة في Cssهي عناصر يتم إنشاؤها من خلال .Htmlكود
حتى يظهر العنصر.content الخاصية after و before* يجب أن يحوي كل من
div::before { content: ""; }
div::after { content: "A"; }
divيضيف عنصر جديد كأول ابن لل
divيضيف عنصر جديد كآخر ابن لل
p::first-line { color: red; }
p::first-letter { font-size: 20px; }
يقوم بتلوين السطر الأول من فقرة باللون الأحمر
يقوم بتحديد حجم الخط لأول حرف من 20pxفقرة إلى
ابحث الآن بمفردك!
Cssخلال إعدادي لهذه الحلقة تأكدت من معلومة أن بإمكان لغة القيام بالعديد من الأمور التي قد تظن أنها بحاجة للغة برمجة ).Javascript( وتذكر أننا نذكر هنا الأمثلة الكافية لتوضيح Cssلا تستهن بقوة الفكرة وليس كل ميزات وخبايا اللغة.