HTML for Kids · درس

أنواع المحدّدات

أنواع المحدّدات درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 1 من أصل 1. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 1 دروس في المجموع.

مقدمة

مرحبًا،

سنطوّر في هذا الدرس معرفتكم بـ CSS بشكل أكبر من خلال استخدام محددات أكثر تعقيدًا.

تعريفات أنماط متعددة

يمكننا إنشاء تعريفات أنماط متعددة من خلال وضع فواصل منقوطة بين كل نمط وآخر.

.first{
   color:blue;
   font-size:20px;
   text-align: center;
}

يوجد مستند HTML يزداد تعقيدًا

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

في المثال أدناه، يوجد مستند HTML يزداد تعقيدًا.

<body>
	<div id="my-area">
		<p class="first">lorem</p>
		<div class="second">
				<p class="third">Ipsum</p>
	</div>
  </div>
</body>

تحليل المثال

لنحلل التعليمات البرمجية لدينا الآن.

يوجد عنصر div يحمل المعرّف my-area ويعمل كحاوية داخل جسم الصفحة. وهو السلف لجميع العناصر الموجودة ضمن هذا العنصر.
عنصر p الذي يحمل الفئة الأولى هو العنصر الشقيق لعنصر div الذي يحمل الفئة الثانية.
العنصر الثالث هو ابن العنصر الثاني، ويمكن اعتبار عنصر my-area سلفًا للعنصر الثالث.

تحذير

يمكنكم التفكير في بنية HTML على أنها شجرة عائلة حرفية.

يمكنكم وراثة صفات جينية من جدكم.

ولكن إذا تغيرت هذه الوراثة لدى والدكم، فسيكون جين الوالد أكثر غلبة، وستتغير الصفة الموروثة من الجد.

تركيبات المحددات

لنرَ الآن كيفية إنشاء تركيبات في المحددات.

توضح العبارة التالية أن العنصر الذي يحمل الفئة الثانية هو سليل (ابن أو حفيد) العنصر الذي يحمل الفئة الثالثة.

إذا وُجدت مسافة بين الفئتين، فهذا يعني أن الفئة الموجودة على اليسار تبحث عن سليل.

.second .third{
	color:red;
}

محدد الابن

في المثال أدناه،

يعني ذلك اختيار الفئة الثالثة، التي هي ابنة الفئة الثانية.

تعني علامة أكبر من اختيار ابن العنصر المعني.

.second > .third{
	color:red;
}

يمكننا دمج محدد الوسم ومحدد الفئة لاختيار عنصر

في الوقت نفسه، يمكننا دمج محدد الوسم ومحدد الفئة لاختيار عنصر.

سيختار المثال أدناه عناصر p التي تحمل الفئة الثالثة.

<style>

p.third{
	color:red;
}

</style>


<p class="third">Hello CSS</p>

لنفترض أننا نريد اختيار div يحمل الفئة الأولى

لنفترض أننا نريد اختيار div يحمل الفئة الأولى.

يعني ذلك في المثال أدناه اختيار العنصر الذي يحمل الفئة الأولى، وهو ابن عنصر div الذي يحمل المعرّف my-area.

يؤدي هذا إلى زيادة أولوية العنصر الذي سيتم اختياره.


div#my-area > .first{
color:red;
}

تحديد جميع العناصر

تُعد علامة النجمة (*) مهمة بين المحددات.

وهي تعني اختيار جميع العناصر.

يشير المحدد في المثال أدناه إلى أن العنصر الذي يحمل المعرّف my-area ينبغي أن يختار جميع السلال.

النقطة التي ينبغي الانتباه إليها هنا هي أن المقصود ليس الأبناء فقط، بل جميع السلال.

إذا أردنا اختيار الأبناء فقط، فعلينا وضع علامة أكبر من قبل علامة النجمة.

/* It chooses all the descendants of #my-area. */
#my-area *{
	color:red;
}

/* It chooses all the children of #my-area. */
#my-area > *{
	color:red;
}

محدد الشقيق المجاور

لقد استخدمنا محدد السليل ومحدد الابن، فلنتعلم الآن عن محدد الأشقاء.

يستخدم محدد الشقيق العلامة + لاختيار الشقيق التالي.

في مثالنا، سيجعل المحدد لون خلفية عنصر الفقرة الثالث أصفر.

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>

</body>
</html>

محدد الأشقاء العام

إذا أردنا اختيار جميع الأشقاء اللاحقين، وليس الشقيق التالي الأول فقط، فإننا نستخدم علامة التلدة (~).

يُعرف رمز التلدة أيضًا باسم مُركِّب الشقيق اللاحق.

<style>

div ~ p {
  background-color: red;
}

</style>

<p>Paragraph 1.</p>
<div>
  <p>Paragraph 2.</p>
</div>
<span>span element.</span>
<p>Paragraph 3.</p>
<p>Paragraph 4</p>

الفئات الزائفة وفئات CSS

تُسمى التعبيرات التي ليست فئة، لكنها تتصرف مثل الفئة، فئات زائفة.

لا نعرّف الفئات الزائفة لأي عنصر في HTML.

عندما يفسر المتصفح التعليمات البرمجية، يفترض أنها موجودة. ولذلك يمكننا استخدام الفئات الزائفة في محددات CSS.

الفئة الزائفة :hover

تُعد :hover بلا شك أشهر الفئات الزائفة.

Hover (:hover) هي فئة زائفة يعرّفها المتصفح تلقائيًا للعنصر المعني عند تحريك مؤشر الفأرة فوق العنصر.

تُستخدم الفئات الزائفة بعد رمز النقطتين (:) في عبارة المحدد.

توضّح الصيغة التالية كيفية استخدام الفئة الزائفة.

selector:pseudo-class {
   property: value;
}

تنسيق الروابط باستخدام :hover

لننشئ الآن رابطًا ونرَ كيف سيبدو عند تمرير المؤشر فوقه.

تحذير: نظرًا لعدم وجود حدث hover كما هو الحال في الويب على الأجهزة المحمولة، فلن يظهر هذا التأثير في تطبيقات Coddykit المحمولة.

في المثال أدناه، لنلاحظ أن لون الرابط سيتحول إلى الأخضر عند تمرير مؤشر الفأرة فوقه.

<!DOCTYPE html>
<html>
<head>
<style>

.my-link{
	color:red;
	}

.my-link:hover{
	color:green;
}

</style>
</head>
<body>

<a class="my-link" href="https://www.coddykit.com">
CoddyKit Homepage Link
</a>

</body>
</html>

الفئة الزائفة :first-child

إحدى أكثر الفئات الزائفة إرباكًا هي :first-child.

عادةً، عند النظر إلى الاسم، قد نستنتج أنه يعني اختيار الابن الأول لعنصر ما.

لكن هذا الاستنتاج غير صحيح.

تُستخدم لاختيار العنصر الأول من بين أشقاء العنصر.

<!DOCTYPE html>
<html>
<head>
<style>

/* Chooses the first p element 
among children of the my-box class. */

.my-box p:first-child {
  font-size: 24px;
} 
</style>
</head>
<body>

<div class="my-box">
  <p>This is first text.</p>
  <p>This is second text.</p>
  <p>This is third text.</p>
</div>
</body>
</html>

الفئة الزائفة :last-child

تُعد last-child عكس الفئة الزائفة first-child. وتُستخدم لاختيار العنصر الأخير من بين أشقاء العنصر.

<!DOCTYPE html>
<html>
<head>
<style>

/* Chooses the last p element 
among children of the my-box class. */

.my-box p:last-child {
  font-size: 24px;
} 
</style>
</head>
<body>

<div class="my-box">
  <p>This is first text.</p>
  <p>This is second text.</p>
  <p>This is third text.</p>
</div>
</body>
</html>

العنصر الزائف ::before

إذا أردنا إضافة شيء قبل عنصر ما، فإننا نستخدم المحدد الزائف ::before.

في المثال أدناه، أضفنا المحتوى 'Hello' قبل عناصر العناوين.

<!DOCTYPE html>
<html>
<head>
<style>
	h1::before {
			content: "Hello ";
	}
</style>
</head>
<body>

<h1>Coddykit</h1>
<h1>Coddykit</h1>
<h1>Coddykit</h1>

</body>
</html>

العنصر الزائف ::after

يُستخدم العنصر الزائف :: after، وهو عكس العنصر الزائف :: before، لإضافة محتوى جديد بعد العنصر.

<!DOCTYPE html>
<html>
<head>
<style>
	h1::after {
			content: " Coddykit";
	}
</style>
</head>
<body>

<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>

</body>
</html>

قائمة Pseudo Class

لقد تعلمنا أكثر pseudo-classes استخدامًا، إلا أن هناك العشرات غيرها.

يمكنكم الوصول إلى قائمة جميع pseudo-classes من الرابط أدناه، واستخدام أي منها عند الحاجة.

تهانينا

تهانينا 🎉

في هذا القسم، تعلمنا أنواع المحددات.

في القسم التالي، سنتعلم أكثر خصائص CSS استخدامًا

الأسئلة الشائعة

هل درس «أنواع المحدّدات» مجاني؟

نعم — نص درس «أنواع المحدّدات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 1 دروس في المجموع.

ماذا ستتعلم في «أنواع المحدّدات»؟

أنواع المحدّدات تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟

لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 1.

كم من الوقت يستغرق درس «أنواع المحدّدات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟

نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

← العودة إلى HTML for Kids