العناصر الزائفة والفئات الزائفة في CSS

في كل مرة يتعين علينا تعديل نمط CSS على الويب لدينا ، ألعب أنا وتوني مقص ورق الصخور لنرى من هو "الرجل المحظوظ" الذي يمكنه القيام بالمهمة. كيف يمكن أن تسأل؟ حسنًا ، كان العمل مع HTML و CSS لفترة طويلة يمثل ألمًا في ** ، حيث أدى إصلاح شيء ما إلى كسر الكثير من الأشياء في مكان آخر.

لكن الحقيقة هي أن CSS قد تغير كثيرًا في السنوات الأخيرة ، وإذا استفدت من وظائفه الجديدة ، فسيكون من الأسهل بكثير تصميم وتصميم موقع الويب الخاص بك بشكل صحيح وفعال. في رأيي ، اثنان من التطورات العظيمة في CSS التي رأيناها مؤخرًا هما تضمين ، أولاً ، flex (لتخطيط الصفوف والأعمدة) ، وبعد ذلك بقليل ، grid (لتخطيط الشبكات).

CSS مليء بالميزات التي يمكن أن تبسط عملك . واليوم سنرى اثنين منهم: العناصر الزائفة والمحددات الزائفة.

كيفية "إنشاء محتوى" باستخدام CSS Pseudo-Elements

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

العناصر الزائفة المتوفرة في CSS3 هي:

• ::before : إضافة محتوى قبل عنصر
• ::afte r: يضيف محتوى بعد عنصر
• ::first-letter : تحديد الحرف الأول من عنصر "الكتلة" (أي ، تلك الخاصية التي تم تعيين خاصية display الخاصة بها على block ، أو الكتلة inline-block ، table-cell ، وما إلى ذلك)
• ::first-line : يختار السطر الأول من عنصر "الكتلة"
• ::selection : يشير إلى أجزاء المستند التي اختارها الزائر

كما ترى ، تتميز العناصر الزائفة بالبدء بزوج من النقطتين ( :: :). وهذه هي الطريقة التي تستخدمها بها.

تحديد أجزاء من المستند

لنفترض ، على سبيل المثال ، أننا نريد فقرة معينة يكون السطر الأول فيها باللون البرتقالي ومسطر. حسنًا ، فقط افعل شيئًا كهذا:

 p::first-line { color: orange; text-decoration: underline; }

وستحصل على النتيجة الصحيحة:

Lorem ipsum dolor sit amet، consectetur adipiscing elit. الدهليز موليس الأسد في نبات التربيس interdum ، عند عنصر فيليترا فيليت. نام إيجيت لاكوس سيد لاكوس ديكتوم سكليريسك. Proin porta ligula sed mi semper، vel interdum massa auctor. Pellentesque et Massa congue، tincidunt erat ac، tincidunt elit. سيد ايه سي دولور ميتوس. نام السلع المتوافقة مع بعضها البعض. Curabitur odio est، tempor id egestas nec، aliquam at nisl.

من ناحية أخرى ، إذا كنت تريد تعديل التحديد ، فإن النهج هو نفسه تمامًا. فقط ضع في اعتبارك أن عدد خصائص CSS التي يمكننا تعديلها يقتصر على color background cursor outline :

 p::selection { background: #21acde; color: white; }

يمكنك رؤية النتيجة في الفقرة التالية ، بافتراض أنك حددت شيئًا ما:

Lorem ipsum dolor sit amet، consectetur adipiscing elit. الدهليز موليس الأسد في نبات التربيس interdum ، عند عنصر فيليترا فيليت. نام إيجيت لاكوس سيد لاكوس ديكتوم سكليريسك. Proin porta ligula sed mi semper، vel interdum massa auctor. Pellentesque et Massa congue، tincidunt erat ac، tincidunt elit. سيد ايه سي دولور ميتوس. نام السلع المتوافقة مع بعضها البعض. Curabitur odio est، tempor id egestas nec، aliquam at nisl.

إنشاء محتوى جديد

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

 <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>

عادة ، هكذا تبدو القوائم:

• واحد
• اثنين
• ثلاثة

ولكن يمكنك تعديله بحيث يتم فصل كل عنصر عن العنصر التالي باستخدام شريط أزرق:

• واحد
• اثنين
• ثلاثة

باستخدام ::after pseudo-element على كل عنصر في القائمة على النحو التالي:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; }

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

كيفية تطبيق الأنماط بدقة أكبر باستخدام الفئات الزائفة

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

• a:link هي تلك الروابط التي لم تقم بزيارتها بالفعل
• a:visited هو أي ارتباط قمت بزيارته بالفعل
• a:hover هو الرابط الذي تحوم فوقه
• a:focus الرابط الذي يتم التركيز عليه حاليًا (وهو مشابه للتمرير ، ولكن باستخدام لوحة المفاتيح بدلاً من الماوس)
• a:active يطابق الارتباط الذي تنقر عليه حاليًا

يوجد في CSS حوالي 60 فئة زائفة. تسمح لك الغالبية العظمى منهم بتصفية العناصر بناءً على حالتها (على سبيل المثال ، يمكنك تحديد عناصر للقراءة فقط باستخدام الفئة الزائفة :read-only فقط ، كما خمنت ذلك). ولكن هناك بعض "الاستثناءات" المثيرة للاهتمام لهذه القاعدة والتي تستحق الذكر.

لكن قبل أن نفعل ذلك ، مجرد ملاحظة جانبية سريعة: لاحظ كيف يمكنك تمييز فئة زائفة من عنصر زائف لأن الأول يبدأ بنقطتين واحد (:) بينما يبدأ الأخير بنقطتين ( : :: .

اختيار الأطفال للعنصر باستخدام الفصول الزائفة "الأطفال" و "من النوع"

تذكر المثال الذي رأيناه سابقًا حيث أضفنا شريطًا رأسيًا لفصل عناصر القائمة؟ حسنًا ، إذا نظرت عن كثب ، سترى أن القاعدة التي وضعناها لا تعمل تمامًا:

• واحد
• اثنين
• ثلاثة

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

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

الذي يعمل تمامًا كما تتخيل:

• واحد
• اثنين
• ثلاثة

كما ترى ، كل ما نقوم به هو إضافة قاعدة جديدة باستخدام الفئة الزائفة :last-child ، والتي تسمح لنا بتحديد آخر عنصر li في قائمة ul الخاصة بنا ، وبمجرد حصولنا عليها ، قم بإخفاء عنصرها الزائف ::after مع تعيين خاصية display إلى none .

الميزات الخاصة * -الطفل و * -من النوع

هناك ثلاثة أشكال مختلفة من فئة الأطفال الزائفة *-child :

• :first-child يتطابق مع الطفل الأول للعنصر (duh!)
• :last-child يفعل الشيء نفسه ، لكن مع الأخير
• :nth-child(i) ، لقد خمنت ذلك ، حدد العنصر الأول (لذلك ، على سبيل المثال ، :nth-child(2) يطابق الطفل الثاني)

لذلك دعونا ننظر ونفكر في CSS التالية:

 li strong:first-child { color: orange; text-decoration: underline; }

ومقتطف HTML التالي:

 <ol> <li>Lorem <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li><em>Lorem</em> <strong>ipsum</strong> dolor <strong>sit</strong> amet.</li> <li>Lorem <strong>ipsum</strong> dolor <em><strong>sit</strong></em> amet.</li> </ol>

ماذا تعتقد سوف يحصل؟ من حيث المبدأ ، يبدو أنه في جميع الحالات الثلاث ، ستكون كلمة ipsum باللون البرتقالي وتسطير ، لأن ipsum هو أول طفل strong في كل عنصر li ، أليس كذلك؟ دعنا نرى:

1. Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet.

حسنًا ، قريب بما فيه الكفاية. هل يمكنك تخمين لماذا حدث هذا؟

الفئة الزائفة :first-child تنطبق على الطفل الأول للعنصر. في الجملة الأولى ، ipsum هي العلامة strong الأولى ، والتي تصادف أن تكون أول طفل. في الجملة الثانية ، العقدة الفرعية الأولى هي em (مع كلمة Lorem ) ثم تأتي علامة strong بكلمة ipsum . لذلك ، هذه العلامة القوية ليست "الطفل الأول". أخيرًا ، في الجملة الثالثة هناك علامتان تتطابقان مع قاعدتنا: ipsum (مثل الجملة الأولى) والجلوس . لاحظ كيف أن sit هو علامة strong تمثل الطفل الأول لعلامة الأصل ( em ).

لذا ، ماذا لو أردنا وضع خط تحت العلامة strong الأولى لكل li ؟ حسنًا ، علينا استخدام فئة زائفة مختلفة والتأكد من أننا نطابق فقط العناصر التي هي عناصر فرعية مباشرة لـ li :

 li > strong:first-of-type { color: orange; text-decoration: underline; }

الذي يعمل كما هو متوقع:

1. Lorem ipsum dolor sit amet.
2. Lorem ipsum dolor sit amet.
3. Lorem ipsum dolor sit amet.

رائع جدا ، أليس كذلك؟ مرة أخرى ، هناك ثلاثة أشكال مختلفة من هذه الفئة الزائفة:

• x:first-of-type يتطابق مع الأخ الأول الذي يكون نوعه x
• x:last-of-type يختار الأخير
• x:nth-of-type(i) تطابق الأخ الأول الذي نوعه هو x

اختيار المقابل بـ :not

أخيرًا ، الطبقة الزائفة التي أردت التحدث عنها اليوم هي :not . :not هي فئة زائفة تطابق تلك العناصر التي لا تتوافق مع خاصية معينة. على سبيل المثال ، دعنا نعود إلى مثالنا السابق:

• واحد
• اثنين
• ثلاثة

لحل مشكلة الشريط الذي يظهر في العنصر الأخير ، قمنا بشكل أساسي (1) بإضافة الشريط إلى جميع عناصر li و (2) الكتابة فوق القاعدة في العنصر الأخير وإخفائها:

 ul li { display: inline; } ul li::after { color: #21acde; content: " | "; display: inline-block; } ul li:last-child::after { display: none; }

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

حسنًا ، يمكننا تحقيق ذلك من خلال تطبيق الفئة الزائفة :not والجمع بينها وبين :last-child :

 ul li { display: inline; } ul li:not(:last-child)::after { color: #21acde; content: " | "; display: inline-block; }

الذي يطبق النمط على جميع عناصر li التي ليست العنصر الأخير ( :not(:last-child) ) ، والتي تصف هدفنا تمامًا وبالتالي تحل مشكلتنا:

• واحد
• اثنين
• ثلاثة

باختصار

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

أتمنى أن تكون هذه المشاركة قد أحببت ، وإذا كنت قد فعلت ذلك ، فيرجى مشاركتها مع أصدقائك!

صورة مميزة بواسطة JFL على Unsplash.