انواع المحددات في css
CSS Selectors هي الطريقة التي يتم بها تحديد العناصر التي تريد تنسيقها في صفحة الويب. وهي تستخدم لتحديد عناصر HTML المناسبة وتطبيق تنسيقات محددة عليها. يمكن استخدام عدة أنواع من محددات العنصر لتحديد العناصر. هنا بعض الأمثلة:
1- محدد العنصر Element Selector
هو أبسط نوع من محددات العنصر، ويتم استخدامه لتحديد عناصر HTML محددة. ويتم الإشارة إلى المحدد بواسطة اسم العنصر الذي يريد تحديده. على سبيل المثال، إذا كنت تريد تحديد عناصر h1 في صفحتك، يمكنك استخدام المحدد التالي:
h1 {
color: red;
}
2- محدد الكلاس Class Selector
يتم استخدام محدد الكلاس لتحديد عناصر HTML التي تحمل الكلاس المحدد. يتم الإشارة إلى المحدد بواسطة النقطة “.” ثم اسم الكلاس الذي يريد تحديده. على سبيل المثال، إذا كنت تريد تحديد عناصر HTML التي تحمل الكلاس “example”، يمكنك استخدام المحدد التالي:
.example {
background-color: blue;
}
3- محدد الإسم ID Selector
يتم استخدام محدد الإسم لتحديد عنصر HTML محدد. يتم الإشارة إلى المحدد بواسطة الهاش “#” ثم اسم الإسم الذي يريد تحديده. على سبيل المثال، إذا كنت تريد تحديد عنصر HTML الذي يحمل الإسم “example”، يمكنك استخدام المحدد التالي:
#example {
border: 1px solid black;
}
4- محدد الأب Parent Selector
يتم استخدام محدد الأب لتحديد العنصر الذي يحتوي على عنصر HTML الذي تريد تنسيقه. يتم الإشارة إلى المحدد بواسطة اسم العنصر الذي يحتوي على العنصر الذي تريد تحديده، متبوعًا بعلامة الفاصل “.” واسم العنصر الذي تريد تحديده. على سبيل المثال، إذا كنت تريد تحديد عناصر p التي تحتوي على عناصر img، يمكنك استخدام المحدد التالي:
p img {
border: 1px solid black;
}
5- محدد الأخ Sibling Selector
يتم استخدام محدد الأخ لتحديد العنصر الذي يلي العنصر HTML الذي تريد تنسيقه. يتم الإشارة إلى المحدد بواسطة اسم العنصر الذي يلي العنصر الذي تريد تحديده، متبوعًا
بعلامة الفاصل “~” واسم العنصر الذي تريد تحديده. على سبيل المثال، إذا كنت تريد تحديد عناصر p التي تلي عناصر h1، يمكنك استخدام المحدد التالي:
h1 ~ p {
font-size: 16px;
}
6- محدد الابن Child Selector
يتم استخدام محدد الابن لتحديد العنصر الذي يحتوي على عنصر HTML الذي تريد تنسيقه. يتم الإشارة إلى المحدد بواسطة اسم العنصر الذي يحتوي على العنصر الذي تريد تحديده، متبوعًا برمز الأقواس “{}” واسم العنصر الذي تريد تحديده. على سبيل المثال، إذا كنت تريد تحديد عناصر div التي تحتوي على عناصر p، يمكنك استخدام المحدد التالي:
div > p {
font-size: 16px;
}
7- محدد البداية Beginning Selector
يتم استخدام محدد البداية لتحديد العنصر الذي يبدأ بقيمة معينة. يتم الإشارة إلى المحدد بواسطة الرمز “^” والقيمة التي يجب أن يبدأ بها العنصر. على سبيل المثال، إذا كنت تريد تحديد عناصر input التي تبدأ بـ “user” في القيمة الخاصة بها، يمكنك استخدام المحدد التالي:
input[name^="user"] {
background-color: yellow;
}
8- محدد النهاية End Selector
يتم استخدام محدد النهاية لتحديد العنصر الذي ينتهي بقيمة معينة. يتم الإشارة إلى المحدد بواسطة الرمز “$” والقيمة التي يجب أن ينتهي بها العنصر. على سبيل المثال، إذا كنت تريد تحديد عناصر input التي تنتهي بـ “pass” في القيمة الخاصة بها، يمكنك استخدام المحدد التالي:
input[name$="pass"] {
background-color: green;
}
9- محدد العنصر الفرعي Sub-selector
يتم استخدام محدد العنصر الفرعي لتحديد العنصر الفرعي لعنصر HTML. يتم الإشارة إلى المحدد بواسطة العلامة “>” واسم العنصر الفرعي الذي تريد تحديده. على سبيل المثال، إذا كنت تريد تحديد عناصر div الفرعية التي تحمل الكلاس “example”، يمكنك استخدام المحدد التالي:
div > .example {
color: blue;
}
10- محدد الأخير Last Selector
يتم استخدام محدد الأخير لتحديد آخر عنصر في مجموعة من العناصر. يتم الإشارة إلى المحدد بواسطة العلامة “:” والكلمة “last”. على سبيل المثال، إذا كنت تريد تحديد آخر عنصر في قائمة ul، يمكنك استخدام المحدد التالي:
ul li:last {
font-weight: bold;
}
11- محدد الأول First Selector
يتم استخدام محدد الأول لتحديد أول عنصر في مجموعة من العناصر. يتم الإشارة إلى المحدد بواسطة العلامة “:” والكلمة “first”. على سبيل المثال، إذا كنت تريد تحديد أول عنصر في قائمة ul، يمكنك استخدام المحدد التالي:
ul li:first {
font-style: italic;
}
12- محدد الخيار الفردي Odd Selector
يتم استخدام محدد الخيار الفردي لتحديد العناصر الفردية في مجموعة من العناصر. يتم الإشارة إلى المحدد بواسطة العلامة “:” والكلمة “odd”. على سبيل المثال، إذا كنت تريد تحديد الخيارات الفردية في عنصر select، يمكنك استخدام المحدد التالي:
select option:odd {
background-color: lightgray;
}
13- محدد الخيار الزوجي Even Selector
يتم استخدام محدد الخيار الزوجي لتحديد العناصر الزوجية في مجموعة من العناصر. يتم الإشارة إلى المحدد بواسطة العلامة “:” والكلمة “even”. على سبيل المثال، إذا كنت تريد تحديد الخيارات الزوجية في عنصر select، يمكنك استخدام المحدد التالي:
select option:even {
background-color: lightblue;
}
14- محدد الزوجي/الفردي nth-child Selector
يتم استخدام محدد الزوجي/الفردي لتحديد العنصر المحدد بواسطة معادلة رياضية. يتم الإشارة إلى المحدد بواسطة العلامة “:” والمعادلة الرياضية. على سبيل المثال، إذا كنت تريد تحديد العنصر الثاني في ul، يمكنك استخدام المحدد التالي:
ul li:nth-child(2) {
color: red;
}
15- محدد الزوجي/الفردي للعناصر الفرعية nth-of-type Selector
يتم استخدام محدد الزوجي/الفردي لتحديد العنصر الفرعي المحدد بواسطة معادلة رياضية. يتم الإشارة إلى المحدد بواسطة العلامة “:” والمعادلة الرياضية. على سبيل المثال، إذا كنت تريد تحديد العنصر الثاني من نوع p في div، يمكنك استخدام المحدد التالي:
div p:nth-of-type(2) {
font-weight: bold;
}
16- محدد الأول من نوعه first-of-type Selector
يتم استخدام محدد الأول من نوعه لتحديد العنصر الأول من نوعه في مجموعة من العناصر. يتم الإشارة إلى المحدد بواسطة العلامة “:” والكلمة “first-of-type”. على سبيل المثال، إذا كنت تريد تحديد أول عنصر من نوع p في div، يمكنك استخدام المحدد التالي:
div p:first-of-type {
font-size: 20px;
}
17- محدد الأخير من نوعه last-of-type Selector
يتم استخدام محدد الأخير من نوعه لتحديد العنصر الأخير من نوعه في مجموعة من العناصر. يتم الإشارة إلى المحدد بواسطة العلامة “:” والكلمة “last-of-type”. على سبيل المثال، إذا كنت تريد تحديد آخر عنصر من نوع p في div، يمكنك استخدام المحدد التالي:
div p:last-of-type {
text-align: right;
}
18- محدد العنصر الوحيد only-child Selector
يتم استخدام محدد العنصر الوحيد لتحديد العنصر الذي هو العنصر الوحيد في عنصر والدي. يتم الإشارة إلى المحدد بواسطة العلامة “:” والكلمة “only-child”. على سبيل المثال، إذا كنت تريد تحديد العنصر الوحيد في div، يمكنك استخدام المحدد التالي:
div p:only-child {
font-style: italic;
}
19- محدد العنصر الوحيد من نوعه only-of-type Selector
يتم استخدام محدد العنصر الوحيد من نوعه لتحديد العنصر الذي هو العنصر الوحيد من نوعه في عنصر والدي. يتم الإشارة إلى المحدد بواسطة العلامة “:” والكلمة “only-of-type”. على سبيل المثال، إذا كنت تريد تحديد العنصر الوحيد من نوع p في div، يمكنك استخدام المحدد التالي:
div p:only-of-type {
font-weight: bold;
}
هذه بعض من محددات CSS Selector الأخرى التي يمكن استخدامها لتحديد العناصر في صفحة الويب. يمكن استخدامها بشكل فردي أو تركيبها معًا لتحديد العناصر التي تريد تنسيقها بشكل أكثر دقة.
