43. تعلم تصميم المواقع – تعلم CSS3: تحديد العناصر 5

43. تعلم تصميم المواقع – تعلم CSS3: تحديد العناصر 5

بسم الله الرحمان الرحيم

شاهد أيضاً: تعلم تصميم المواقع – تعلم HTML, HTML5, CSS, CSS3: المقدمة

شاهد أيضاً: إدخال البيانات في مواقع ويب

شاهد أيضاً: تركيب مواقع ووردبريس

شاهد أيضاً: تصميم صفحة ويب HTML5, CSS3, JavaScript

تحديد العناصر 5 Selectors – Nth Child, Nth Of Type:

تحديد عنصر معين من العناصر وتنسيقه Nth-Child

تحديد عنصر معين من العناصر حسب نوعه فقط وتنسيقه Nth-Of-Type

Nth: Number th[1st, 2nd, 3rd, 4th, 5th]

يمكن إدخال:

رقم، معادلة، كلمة مفتاحية

attribute:nth-child(Number, Formula, Keyword)

attribute:nth-of-type(Number, Formula, Keyword)

تحديد عنصر معين برقمه فقط Number

attribute:nth-child(Number)

attribute:nth-of-type(Number)

تحديد عنصر معين بكلمة مفتاحية Keyword:

attribute:nth-child(Keyword)

attribute:nth-of-type(Keyword)

even: تحديد العناصر بدءً من العنصر الاخير وتنسيقه وتجاوز العنصر الذي بعده ثم تنسيق العنصر الذي بعده وهكذا

odd: عكس الخاصية السابقة، تحديد العناصر بدءً من العنصر الأول وتنسيقه وتجاوز العنصر الذي بعده ثم تنسيق العنصر الذي بعده وهكذا

Nth Last Child: مثل nth-child لكن يتم تحديد العناصر بدءً من العنصر الاخير

attribute:nth-last-child(Number, Formula, Keyword)

Nth Last Of Type: مثل nth-of-type لكن يتم تحديد العناصر حسب نوعها بدءً من العنصر الاخير

attribute:nth-last-of-type(Number, Formula, Keyword)

مثال:

تنسيق css3:

css3 43

الشكل على المتصفح:

css3 43 1

تحديد العناصر 6 Selectors – Nth Child, Nth Of Type:

تحديد عنصر باستخدام معادلة وتنسيقه Formula

attribute:nth-child(n+number)

تحديد العنصر رقم كذا وكل العناصر التي بعده

attribute:nth-of-type(n+number)

تحديد العنصر رقم كذا وكل العناصر التي بعده حسب النوع

attribute:nth-last-child(n+number)

تحديد العنصر رقم كذا وكل العناصر التي بعده بدءً من العنصر الاخير

attribute:nth-last-of-type(n+number)

تحديد العنصر رقم كذا وكل العناصر التي بعده حسب النوع بدءً من العنصر الاخير

(-n+number): الخواص السابقة معكوسة

(2n+1): مثل خاصية odd، تحديد عنصر وتجاوز عنصر واحد بعده ثم تحديد عنصر اخر وهكذا

شرح المعادلة:

2*n+1 | 2*0 = 0 + 1 = 1

2*n+1 | 2*1 = 2 + 1 = 3

2*n+1 | 2*2 = 4 + 1 = 5

2*n+1 | 2*3 = 6 + 1 = 7

ونفس الأمر ينطبق على باقي المعادلات مثل:

(3n+1)

(4n+1)

….

Range: تحديد عناصر ضمن مجال معين (تحديد من العنصر رقم كذا الى العنصر رقم كذا)

attribute:nth-child(n+number)(-n+number)

مثال:

تنسيق css3:

css3 44

الشكل على المتصفح:

css3 44 1

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *