شرح تفصيلي للفرق بين العناصر الزائفة في CSS3 ومحددات الفئة الزائفة وأمثلة تطبيقها

يتم تعريف كل من العناصر الزائفة والفئات الزائفة عن طريق إلحاق كلمة رئيسية محددة بعد المحدد، واتباع قواعد بناء الجملة المماثلة، وتعيين الأنماط المقابلة في كتل قواعد CSS. يمكن للعناصر الزائفة إضافة محتوى أو استبداله من خلال سمة المحتوى. على سبيل المثال، يمكن لـ :before و:after إدراج نص أو صور أو محتوى آخر تم إنشاؤه. تؤثر الفئات الزائفة فقط على نمط العنصر، ولكنها لا تضيف أو تعدل المحتوى. إنها تغير سلوك العناصر بناءً على تفاعل المستخدم أو بنية المستند أو الشروط المنطقية الأخرى. الاختلافات الرئيسية هي كما يلي:

الكائنات المستهدفة :

تعمل محددات الفئات الزائفة (الفئات الزائفة) على العناصر الموجودة بالفعل وتستخدم لوصف حالة أو علاقة معينة للعنصر، مثل حالة الوصول للارتباط ( :visited )، وحالة تمرير الماوس ( :hover )، وما إذا كان مستندًا هو العنصر الفرعي الأول في ( :first-child ) وما إلى ذلك. وهي لا تغير بنية العنصر بشكل مباشر، ولكنها تؤثر على كيفية تصرف العنصر في ظل ظروف معينة. يتم استخدام محددات العناصر الزائفة لإنشاء وتحديد جزء معين داخل عنصر أو لإنشاء عقد محتوى افتراضية جديدة قبل العنصر وبعده. على سبيل المثال، يمكن استخدام :before و :after لإدراج محتوى إضافي، :first-line و :first-letter يحددان السطر الأول من النص والحرف الأول من العنصر على التوالي، ويتحكم :marker في نمط علامة عنصر القائمة، وما إلى ذلك . لا تتوافق هذه العناصر الزائفة مع العناصر الفعلية في مستند HTML، ولكن يمكن تطبيق الأنماط عليها كما لو كانت أجزاء حقيقية من المستند.

المعرف النحوي :

عادةً ما يتم تحديد الفئات الزائفة بنقطتين : :)، مثل :hover ، :focus . يتم تحديد العناصر الزائفة في CSS3 بنقطتين متتاليتين ( :: ) لتمييزها عن الفئات الزائفة في الإصدارات الأقدم من CSS. على الرغم من أن معظم المتصفحات الحديثة لا تزال تقبل النقطتين المفردتين لتمثيل عناصر زائفة (مثل :before )، من أجل الامتثال لمعايير W3C والحفاظ على أفضل الممارسات، فمن المستحسن استخدام نماذج النقطتين المزدوجتين، مثل ::before ، ::after .

إعادة الاستخدام :

يمكن دمج الفئات الزائفة في نفس المحدد، مثل a:hover:focus لتمثيل رابط تم تحريكه وتركيزه. لا يمكن عمومًا أن تظهر العناصر الزائفة بشكل متكرر في نفس المحدد لأنها تمثل جزءًا محددًا من العنصر أو المحتوى الجديد الذي تم إنشاؤه. يمكن أن يحتوي العنصر على عنصر زائف واحد فقط :before أو :after في نفس الوقت.

1. شرح تفصيلي وأمثلة تطبيقية لمحدد العناصر الزائفة CSS3

عناصر CSS3 الزائفة هي محددات CSS خاصة تسمح للمطورين بإضافة أو تعديل أنماط أجزاء معينة من عنصر من خلال CSS دون تعديل بنية HTML، أو إنشاء محتوى افتراضي والتحكم فيه داخل العنصر أو خارجه. فيما يلي شرح تفصيلي وأمثلة تطبيقية للعديد من العناصر الزائفة الشائعة في CSS3:

1 :before و :after

ينشئ كل من العنصرين الزائفين :before و :after "عنصرًا فرعيًا" جديدًا بلا محتوى وغير مرئي بعد منطقة محتوى العنصر المحدد. بعد ذلك، من خلال تعيين الأنماط (مثل المحتوى والحجم واللون والخلفية وما إلى ذلك) لهذا العنصر الزائف، يصبح مرئيًا ويظهر بصريًا على أنه الجزء الذي يتبع محتوى العنصر الأصلي مباشرة. يتم تعريف هذه المحتويات بواسطة سمة content ، ويمكن تطبيق أنماط إضافية.

القواعد :

 المحدد: قبل {
المحتوى: "..." /* أو قيمة أخرى */;
/* إعلانات الأنماط الأخرى */
}
المحدد: بعد {
المحتوى: "..." /* أو قيمة أخرى */;
/* إعلانات الأنماط الأخرى */
}

من بينها، سمة content هي المفتاح لتحديد المحتوى الناتج عن العناصر الزائفة. يمكنه قبول القيم التالية:

سلسلة : تحديد النص الذي سيتم عرضه مباشرة. كيانات HTML محاطة بعلامات الاقتباس : مثل content: "—"; ; عنوان URL : أدخل موارد الصورة، مثل content: url(image.png); إنشاء كلمات رئيسية للمحتوى : مثل content: counter(name); (counter) أو content: attr(attribute-name); ;

أمثلة التطبيق :

1.1. إضافة محتوى زخرفي

أضف علامات الاقتباس أو الرموز أو العناصر الزخرفية الأخرى.

إضافة اقتباسات:

 اقتباس كتلة: قبل {
المحتوى: اقتباس مفتوح؛
حجم الخط: أكبر؛
اللون: #666؛
}
اقتباس كتلة: بعد {
المحتوى: اقتباس قريب؛
}

إضافة رموز مخصصة قبل/بعد عناصر القائمة:

 لي: قبل {
المحتوى: url(icon-checkmark.svg);
الهامش الأيمن: 0.5م؛
}
لي.اكتمل: بعد {
المحتوى: "2713" /* حرف Unicode: علامة الاختيار */
اللون: أخضر؛
حجم الخط: 1.5em؛
محاذاة رأسية: فائق؛
}

1.2 تعويم واضح

غالبًا ما يتم استخدام :after لإنشاء عنصر فارغ على مستوى الكتلة، ويتم استخدامه مع clear:both لمسح تأثير التعويم على العناصر اللاحقة وتجنب مشكلة "انهيار الارتفاع".

 .مسح الإصلاح: بعد {
محتوى: ""؛
عرض: الجدول؛
واضح: كلاهما؛
}

قم بتطبيق فئة .clearfix على عناصر الحاوية التي تحتاج إلى مسح العوامات الداخلية.

1.3 استبدال أو توسيع محتوى HTML

باستخدام الدالة attr() ، يمكنك استخراج القيمة من سمة العنصر كمحتوى :after لتحقيق عرض نص ديناميكي.

 أبر[العنوان]:بعد {
المحتوى: "(" attr(العنوان) ")";
حجم الخط: أصغر؛
اللون: رمادي؛
}

في هذا المثال، عند تمرير الماوس فوق عنصر abbr الذي يحتوي على سمة title ، سيتم عرض قوس رمادي صغير يحتوي على قيمة سمة title .

1.4 تنفيذ الأشكال والرسوم المتحركة المعقدة

بالدمج مع content background border والخصائص الأخرى بالإضافة إلى transform CSS3 أو transition أو animation ، يمكنك استخدام :after لإنشاء أشكال معقدة وتأثيرات رسوم متحركة.

 .زر: بعد {
محتوى: ""؛
العرض: كتلة مضمنة؛
العرض: 0;
الارتفاع: 0;
الحدود العلوية: ⅓em صلبة وشفافة؛
الحدود اليمنى: ⅓em صلبة وشفافة؛
الحد السفلي: ⅓em صلب #007BFF؛
الحدود اليسرى: ⅓em صلبة وشفافة؛
الهامش الأيسر: 0.½em؛
}
.زر:تحوم: بعد {
تحويل: ترجمة Y(-0.1em);
الانتقال: تحويل 0.2 ثانية بسهولة؛
}

ينشئ التعليمة البرمجية أعلاه سهمًا منسدلًا مثلثًا بعد عنصر .button وينفذ رسمًا متحركًا سلسًا للأسفل عند تمرير الماوس.

أشياء يجب ملاحظتها

يجب استخدام العنصر الزائف :after مع سمة content ، وإلا فلن يكون له أي تأثير. نظرًا لأن :after هو عنصر افتراضي تم إنشاؤه، فلا يمكن تنفيذ عمليات DOM من خلال JavaScript. على الرغم من أن المحتوى الذي تم إنشاؤه بواسطة :after يمكن أن يشارك في التخطيط، إلا أنه لا يتم تضمينه في DOM، ولا يؤثر على الدلالات، ولا يؤثر على وظائف إمكانية الوصول مثل التنقل عبر لوحة المفاتيح.

باختصار، تعمل محددات العناصر الزائفة في CSS3 على إثراء تعبير تصميم الويب بشكل كبير عن طريق إدراج محتوى مخصص بعد محتوى العنصر دون تغيير بنية HTML. يمكن أن يساعد الاستخدام المتقن للعناصر الزائفة وتقنيات CSS الأخرى المطورين على بناء واجهات ويب أكثر جمالاً واستجابة وسهلة الصيانة.

2 :first-line و :first-letter

يتم استخدام محدد العنصر الزائف :first-line لتصميم السطر الأول من النص داخل العنصر، في حين يتم استخدام العنصر الزائف :first-letter لتصميم الحرف الأول داخل العنصر.

القواعد :

 محدد: السطر الأول {
/* إعلان النمط */
}
المحدد: الحرف الأول {
/* إعلان النمط */
}

أمثلة التطبيق :

المسافة البادئة للسطر الأول:

 المادة ص:السطر الأول {
مسافة بادئة للنص: 2em؛
}

الكتابة بالأحرف الكبيرة والزخرفة:

 المادة h2: الحرف الأول {
حجم الخط: 2em؛
تعويم: يسار؛
الهامش الأيمن: 0.5م؛
ارتفاع الخط: 0.8؛
اللون: #8A2BE2؛
لون الخلفية: #F8F8FF؛
الحشو: 0.⅔em 0.⅓em؛
نصف قطر الحدود: 0.5em؛
}

2. شرح مفصل وأمثلة عملية لمحدد الفئة الزائفة CSS3

يُعد محدد الفئة الزائفة في CSS3 أداة قوية تسمح للمطورين بتحديد موضع الأنماط وتطبيقها بدقة استنادًا إلى حالة العنصر بدلاً من موضعه في شجرة المستندات أو السمات المتأصلة مثل الفئة والمعرف. تستخدم هذه المحددات هياكل تركيبية خاصة لوصف الحالات الشرطية المختلفة للعناصر، مثل تفاعل المستخدم، والعلاقات الموضعية، وخصائص المحتوى، وما إلى ذلك، وبالتالي تحقيق تصميم ويب ديناميكي وسريع الاستجابة. يوجد أدناه شرح مفصل لمحددات الفئة الزائفة في CSS3 وأمثلة على تطبيقاتها العملية.

1. محدد الفئة الزائفة الثابتة

:link و :visited

:link : يُستخدم لتحديد الارتباطات التشعبية (عناصر <a> ) التي لم تتم زيارتها بواسطة المستخدم. يُستخدم عادةً لتعيين الأنماط الأساسية للروابط التي لم تتم زيارتها.

 أ: الرابط {
اللون: أزرق؛
زخرفة النص: لا شيء؛
}

:visited : حدد الروابط التي زارها المستخدم. يستخدم لتعيين أنماط مختلفة للارتباطات التي تمت زيارتها.

 أ:زار {
اللون: أرجواني؛
}

2. محددات الفئة الزائفة لتفاعل المستخدم :hover ، :focus ، :active

:hover : يطابق العنصر عندما يحوم مؤشر الماوس فوقه.

 زر: تحوم {
لون الخلفية: #f0f0f0؛
المؤشر: المؤشر؛
}

:focus : حدد العنصر الذي يتلقى التركيز، والذي يوجد عادة في عناصر تحكم النموذج أو العناصر القابلة للتركيز (مثل <input> و <textarea> و <button> وما إلى ذلك).

 الإدخال: التركيز {
المخطط التفصيلي: 2 بكسل صلب #007BFF؛
صندوق الظل: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

:active : يُستخدم للإشارة إلى أن المستخدم يقوم بتنشيط عنصر ما أو الضغط عليه (عادةً عند النقر بالماوس أو الضغط على شاشة تعمل باللمس).

 أ:نشط {
اللون: أحمر؛
وزن الخط: غامق؛
}

3. محددات الفئة الزائفة المنظمة :first-child ، :last-child ، :only-child ، :nth-child(n) ، إلخ.

:first-child : يحدد العنصر الذي هو الطفل الأول للعنصر الأصلي.

 لي: الطفل الأول {
نوع نمط القائمة: مربع؛
}

:last-child : يحدد العنصر الذي هو الابن الأخير للعنصر الأصلي.

 div > p:الطفل الأخير {
الهامش السفلي: 0;
}

:only-child : حدد العناصر التي ليس لها أشقاء.

 .الرسالة:الطفل الوحيد {
عرض الحدود: 2 بكسل؛
}

:nth-child(n) : حدد العنصر الفرعي n للعنصر الأصلي، حيث يمكن أن يكون n رقمًا أو كلمة رئيسية ( even أو odd ) أو صيغة (مثل 2n+1 ).

 لى: nth-الطفل (2n) {
لون الخلفية: #f9f9f9؛
}

4. محددات الفئة الزائفة ذات الصلة بالمحتوى

:empty ، :target ، :enabled ، :disabled ، :checked ، وما إلى ذلك.

:empty : حدد العناصر بدون أي محتوى (بما في ذلك العناصر الفرعية والعقد النصية وما إلى ذلك).

 شعبة فارغة: فارغة {
العرض: لا شيء؛
}

:target : حدد العنصر الذي يتطابق معرف جزء URL الحالي (التجزئة) مع معرف العنصر.

 #المحتوى:الهدف {
لون الخلفية: أصفر فاتح؛
}

:enabled و :disabled: حدد عناصر النموذج في الحالات الممكنة والمعطلة على التوالي.

 الإدخال: ممكّن {
لون الخلفية: أبيض؛
}
الإدخال: معطل {
العتامة: 0.6؛
المؤشر: غير مسموح به؛
}

:checked : يُستخدم عند تحديد خانة الاختيار ( <input type="checkbox"> ) أو زر الاختيار ( <input type="radio"> ) أو عنصر <option> .

 الإدخال[نوع = "مربع الاختيار"]: محدد + تسمية {
زخرفة النص: خط من خلال؛
}

5. قم بإلغاء محددات الفئة الزائفة

:not(selector)

:not() : يحدد العناصر التي لا تتطابق مع المحدد المحدد بين قوسين.

 /* باستثناء جميع الفقرات ذات الفئة "استبعاد" */
ص: لا (.استبعاد) {
اللون: أخضر؛
}

6. محددات الفئة الزائفة الأخرى

:root ، :nth-of-type(n) ، :nth-last-of-type(n) ، :first-of-type ، :last-of-type ، :only-of-type وما إلى ذلك.

:root : حدد العنصر الجذر للمستند (عادةً العنصر <html> في مستندات HTML).

 :جذر {
--اللون الأساسي: #3498db;
}

:nth-of-type(n) و :nth-last-of-type(n): يشبه :nth-child(n) ، ولكن فقط للعناصر الفرعية من نوع معين بين العناصر الشقيقة.

 المادة:من النوع (حتى) {
لون الخلفية: #f5f5f5؛
}

:first-of-type و :last-of-type و :only-of-type: على التوالي حدد العنصر الفرعي الأول أو الأخير أو الوحيد من نوع معين بين العناصر الشقيقة.

 div > p:النوع الأول {
وزن الخط: غامق؛
}

من خلال إتقان محددات الفئة الزائفة CSS3 المذكورة أعلاه وسيناريوهات التطبيق الخاصة بها، يمكن للمطورين كتابة تعليمات برمجية CSS أكثر كفاءة وتعبيرًا وتفاعلية لتحسين تجربة المستخدم والتأثيرات المرئية لموقع الويب. مع استمرار تطور معيار CSS، قد ينضم المزيد من محددات الفئة الزائفة الجديدة إلى صفوف CSS3 لتوفير طرق تحكم أكثر ثراءً وتعقيدًا لتطوير الواجهة الأمامية.

سواء أكانت فئة زائفة أو عنصرًا زائفًا، فقد تم تصميمها جميعًا لتحسين وظائف محددات CSS، مما يسمح للمطورين بالتحكم بدقة أكبر في نمط العناصر وتخطيطها دون تغيير بنية HTML.

بهذا نختتم هذه المقالة حول الاختلافات والتفسيرات التفصيلية وأمثلة تطبيقية لعناصر CSS3 الزائفة ومحددات الفئات الزائفة لمزيد من المعلومات حول عناصر CSS3 الزائفة ومحددات الفئات الزائفة، يرجى البحث في المقالات السابقة على downcodes.com أو مواصلة التصفح. المقالات ذات الصلة أدناه، أتمنى أن تدعم موقع downcodes.com في المستقبل!