المحددات Selectors في CSS
في عالم تطوير الويب، لا يمكن تجاهل قوة وأهمية CSS في تحقيق التصميم والتنسيق المرغوب لصفحات الويب. ومن بين أدوات CSS الأساسية التي تساعدنا في تحقيق ذلك، تأتي المحددات (Selectors) على رأس القائمة. فماذا نعني بالمحددات Selectors في CSS… ؟؟ وماهي أنواع المحددات (Selectors) المتوفرة في CSS..؟؟!!
نتعرف في هذا المقال على المحددات Selectors في CSS ،على أنواعها المختلفة وكيفية استخدامها بشكل فعال. سنتعرف على كيفية استخدام المحددات الأساسية Basic Selectors، سنستكشف أيضًا المحددات المتقدمة Advanced Selectors بالإضافة إلى ذلك، سنستكشف محددات السمات Attributes Selectors لنبدأ...
- في هذا المقال نتعرف على :
- ماهي المحددات Selectors في CSS ؟
- المحددات الأساسية Basic Selectors.
- المحددات المتقدمة Advanced Selectors.
- محددات السمات Attributes Selectors.
ماهي المحددات Selectors في CSS
المحددات Selectors في CSS هي عناصر تستخدم لتحديد العناصر في صفحة الويب التي ترغب في تطبيق أنماط التنسيق عليها. تعمل المحددات Selectors على تحديد العناصر المستهدفة بناءً على الصفات و الهيكل الهرمي لصفحة الـ HTML وفي مقدمة مقالات الـ CSS تكلمنا عن المحددات Selectors على أنها أجزاء كود CSS حيث يشير المحدد Selector الى عنصر من عناصر HTML أو عدة عناصر في HTML (نعني بهذه العناصر الأوسمة Tags ) او يشير المحدد الى اسم للـ Class او اسم للـ id.
و توفر الـCSS أيضاً أنواع أخرى من المحددات (Selectors ) التي تشير الى اجزاء أكثر دقة في كود الـ HTML ، و فيما يلي تصنيف للأنواع المحددات Selectors الشائعة في CSS:
- المحددات الأساسية Basic Selectors : وهي المحددات Selectors التي تشير بشكل مباشر الى عناصر الـ HTML مثل الاختيار بواسطة العنصر (Element Selectors) والاختيار بواسطة الفئة (Class Selectors) والاختيار بواسطة الهوية (ID Selectors).
- المحددات المتقدمة Advanced Selectors : وهي المحددات Selectors التي تمنحنا مرونة أكبر في تحديد العناصر وتطبيق التنسيقات المحددة. مثل محددات النسل (Descendant Selectors) التي تمكننا من تحديد العناصر المتداخلة والعناصر الفرعية داخل عناصر أخرى. و محددات الاخوة (Sibling Selectors) التي تمكننا من تحديد العناصر التي تكون على نفس المستوى في التسلسل.
- محددات السمات Attributes Selectors : وهي المحددات Selectors التي تسمح لنا بتحديد العناصر بناءً على السمات التي تحملها سنتعرف على محددات السمات المختلفة مثل التحديد بواسطة السمة (Attribute Selectors) والتحديد بواسطة قيمة السمة (Value Selectors) والتحديد بواسطة جزء من قيمة السمة.
مع معرفة هذه الأنواع المختلفة من المحددات Selectors في CSS، ستكون لديك القدرة على تحديد أي عنصر في صفحة الويب وتطبيق التنسيقات الملائمة له. ستتمكن من تخصيص التصميم وتحقيق المرونة والتأثيرات التي ترغب فيها لمشروعك.
المحددات الأساسية Basic Selectors
المحددات الأساسية Basic Selectors في CSS هي أدوات تستخدم لتحديد العناصر في صفحة الويب وتطبيق التنسيقات عليها والمحددات الأساسية (Basic Selectors) هي :
1- محدد العنصر Element Selector:
و يستخدم لتحديد العناصر على أساس اسم العنصر أي عندما نريد ان يشير المحدد (selector) الى عنصر (tag ) في HTML سنكتب اسم العنصر مباشرة . على سبيل المثال:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<style>
p { color: red; }
</style>
</head>
<body>
<h1 >Welcome!!</h1>
<p>Hello World! </p>
</body>
</html>الـ Output للمثال:
في المثال تم استخدام محدد العنصر (Element Selector) لتحديد العناصر بناءً على نوعها، فتم تحديد كل الفقرات <p> في الصفحة. أي سيتم تطبيق أنماط التنسيق المحددة على جميع العناصر الـ `<p>` في الصفحة .
2- محدد الفئة Class Selector:
ويستخدم لتحديد العناصر التي لها نفس الفئة (Class). يتم تعريف الفئة باستخدام النقطة (.) أي عند الإشارة إلى محدد Selector من نوع Class في مستند HTML نكتب اسم الـ Class مع اضافة نقطة قبل اسم الـ Class على سبيل المثال:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<style>
.highlight { background-color: yellow; }
</style>
</head>
<body>
<h1 class="highlight" >Welcome!!</h1>
<p class="highlight">Hello World! </p>
</body>
</html>الـ Output للمثال:
في المثال تم استخدام محدد الفئة لتحديد العناصر التي تحمل تعيينًا للفئة (Class) معينة، مما يتيح تطبيق التنسيقات على مجموعة معينة من العناصر. أي سيتم أنماط التنسيق المحددة على جميع العناصر التي تنتمي إلى الفئة "highlight".
3- محدد الهوية ID Selector:
ويستخدم لتحديد عنصر واحد فقط بناءً على الهوية (id) التي تم تعريفها باستخدام العلامة (#) أي عند الإشارة الى المحدد من نوع id نكتب علامة # ثم اسم الـ id على سبيل المثال:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<style>
#header{ color: blue;}
</style>
</head>
<body>
<h1 id="header">Welcome!!</h1>
<p>Hello World! </p>
</body>
</html>الـ Output للمثال:
في المثال تم استخدام محدد الهوية (ID Selector) لتحديد العنصر الذي يحمل الهوية "header"، وستم تطبيق التنسيقات بشكل خاص على هذا العنصر فقط.
جميع أمثلة هذا الجزء على الرابط.
باستخدام المحددات الأساسية (Basic Selectors ) ، يمكن للمطورين تحديد العناصر المطلوبة وتطبيق التنسيقات المناسبة لتحقيق التصميم المطلوب وتعزيز تجربة المستخدم على صفحات الويب.
المحددات المتقدمة Advanced Selectors
المحددات المتقدمة (Advanced Selectors) في C SS هي أدوات تتيح للمطورين تحديد العناصر بشكل أكثر دقة وتحكم في تنسيقاتها بطرق متقدمة. هنا وصف مختصر لبعض المحددات المتقدمة:
1- محدد النسل Descendant Selector:
ويستخدم الـ Descendant Selectors لتحديد العناصر التي تكون فرعًا أو مضمنة داخل عنصر آخر. بمعنى ان نمط التنسيق سيطبق على العناصر الفرعية المباشرة (الأبناء) والعناصر الفرعية الغير مباشرة (الأحفاد) للعنصر المحدد. أي يستخدم لتحديد العناصر المتداخلة داخل عناصر أخر، ويستخدم هذا المحدد المسافة للفصل بين العناصر. على سبيل المثال:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<style>
.container p{ color: blue;}
</style>
</head>
<body>
<p>1-Hello World!</p>
<div class='container'>
<p>2-Hello World!</p>
<div>
<p>3-Hello World!</p>
</div>
</div>
<p>4-Hello World!</p>
</html>الـ Output للمثال:
سيتم تطبيق أنماط التنسيق المحددة على جميع العناصر <p> التي تكون مضمنة داخل container Class.
2- الابن المباشر Child Selector:
يستخدم الـ Child Selectors لتحديد العناصر الفرعية المباشرة لعنصر آخر. بمعنى ان نمط التنسيق سيطبق على العناصر الفرعية المباشرة (الأبناء فقط) للعنصر المحدد . و يستخدم هذا المحدد العلامة (<) للفصل بين العناصر. على سبيل المثال:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<style>
.container > p{ color: blue;}
</style>
</head>
<body>
<p>1-Hello World!</p>
<div class='container'>
<p>2-Hello World!</p>
<div>
<p>3-Hello World!</p>
</div>
</div>
<p>4-Hello World!</p>
</html>الـ Output للمثال:
سيتم تطبيق أنماط التنسيق المحددة على العناصر <p> التي تكون مباشرة فرعًا للـ container Class.
3- محدد الأخوة Sibling Selector:
يستخدم لتحديد العناصر التي تكون على نفس المستوى في التسلسل بغض النظر عن وجود عنصر شقيق بينها، مثل تحديد جميع العناصر <input> بعد العنصر <label>. وتأخذ نوعين هما :
1. محدد الأخوة العام General Sibling Selector:
يستخدم الـ General Sibling Selector لتحديد العناصر الأخوة التي تتبع عنصر آخر. معنى سيطبق نمط التنسيق على العناصر التالية للعنصر المحدد. و يستخدم هذا المحدد العلامة (~) للفصل بين العنصرين. حيث يمثل العنصر المحدد الحد الأول بينما العنصر التالي يمثل بالحد الثاني على سبيل المثال:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<style>
.container ~ p{ color: blue;}
</style>
</head>
<body>
<p>1-Hello World!</p>
<div class='container'>
<p>2-Hello World!</p>
<div>
<p>3-Hello World!</p>
</div>
</div>
<p>4-Hello World!</p>
<p>5-Hello World!</p>
</html>الـ Output للمثال:
سيتم تطبيق أنماط أنماط التنسيق المحددة على جميع العناصر <p> التي تلي الـ container Class.
2- محدد الأخوة المجاورة Adjacent Sibling Selector:
و يستخدم Adjacent Sibling Selectors لتحديد العنصرالذي يكون على نفس المستوى في التسلسل والذي يلي العنصر المحدد مباشرة، بمعنى سيطبق نمط التنسيق على العنصر المباشر التالي للعنصر المحدد. و يتم استخدام العلامة (+) للفصل بين العنصرين ، حيث يمثل العنصر المحدد الحد الأول بينما العنصر التالي يمثل بالحد الثاني. على سبيل المثال:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<style>
.container + p{ color: blue;}
</style>
</head>
<body>
<p>1-Hello World!</p>
<div class='container'>
<p>2-Hello World!</p>
<div>
<p>3-Hello World!</p>
</div>
</div>
<p>4-Hello World!</p>
<p>5-Hello World!</p>
</html>الـ Output للمثال:
سيتم تطبيق أنماط التنسيق المحددة على العنصر<p> الذي يلي مباشرة للـ container Class .
المحدد العام Universal Selector:
ويستخدم المحدد العام Universal Selections لتحديد جميع العناصر في صفحة الويب. ويرمز للـ Universal Selection بعلامة النجمة (*) ، على سبيل المثال:
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<style>
*{ color: blue;}
</style>
</head>
<body>
<p>1-Hello World!</p>
<div class='container'>
<p>2-Hello World!</p>
<div>
<p>3-Hello World!</p>
</div>
</div>
<p>4-Hello World!</p>
<p>5-Hello World!</p>
</html>الـ Output للمثال:
ستُطبق أنماط أنماط التنسيق المحددة على جميع العناصر في الصفحة.
جميع أمثلة هذا الجزء على الرابط.
باستخدام هذه المحددات المتقدمة (Advanced Selectors) ، يمكن للمطورين تحقيق تحكم أكبر في تحديد العناصر وتطبيق التنسيقات بشكل أكثر دقة ودقة في تصميم الصفحات الويب وتحسين تجربة المستخدم.
محددات السمات Attribute Selectors
محددات السمات (Attributes Selectors) في CSS هي محددات تستخدم لتحديد العناصر التي تحتوي على سمات محددة أو تلك التي تتوافق مع قيم محددة للسمات. هناك عدة أنواع من محددات السمات التي يمكن استخدامها في CSS:
1. Selector ["attribute"] :
و يحدد العناصر التي تحتوي على السمة المحددة (attribute) بغض النظر عن قيمتها. على سبيل المثال، a[target] سيحدد جميع الروابط التي تحتوي على سمة "target".
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
color: green;
}
</style>
</head>
<body>
<h2>[attribute] Selector</h2>
<p>All links with a target attribute, get a green color:</p>
<a href="#">Link1</a>
<a href="#" target="blank">Link2</a>
<a href="#" target="top">Link3</a>
</body>
</html>الـ Output للمثال:
![المحددات Selectors في CSS - Selector ["attribute"]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHEoTJbOcSPqe3EaoIXGwNpYEhYBBFVO7-njZWHRJ35qLSZklxHRx8Y_NDd5hJI3pbz8cWwdT6O-lboW6EKsH6lgWXt3671OjsObUuGGiqBAVGodvvu0H4XUob8ST5U3MOq6-fDRJDh1rWZxNtdjngcLlMmL9iJjj9Fg1lzUr4fFNcexPGleCVp2hILwY/s1600/1-attributeSelector.png "المحددات Selectors في CSS - Selector [\"attribute\"]")
2. Selector [attribute = "value"] :
و يحدد العناصر التي تحتوي على السمة المحددة (attribute) وتكون قيمتها مطابقة للقيمة المحددة (value). على سبيل المثال:
<!DOCTYPE html>
<html>
<head>
<style>
div {height : 20px; width :40px; border:2px solid blue; margin : 5px;}
[class ="box"]{
background-color: yellow;
}
</style>
</head>
<body>
<h2>[attribute = "value"] Selector</h2>
<p>Only, div boxes with a "class" attribute that matches with "box" word, can gets yellow background.</p>
<div class="box"></div>
<div class="Box1"></div>
<div class="box-2"></div>
<div class="box 3"></div>
<div class="box_4"></div>
<!--with [attribute="value"] only the "class" attributes matches with "box" are acceptable -->
</body>
</html>الـ Output للمثال:
![المحددات Selectors في CSS - Selector [attribute = "value"]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZgIAFDHR84z9GXqKg6kwPux7niEH-bMi6yxNisE4HJd3G5BHF0KNo19jMlegBcE1byZqH7nBsZtoInodTeV7N7zxMm2dbw9fpof1b2BVXFAvKQgFR7jZL5mUxkBAOFy-o7T2CtAE9i_8snkaUEe8xe58feMiipf2AWRy2lpGve99IU76DyMcOhgxizXI/s1600/2-attributeSelectorValue.png "المحددات Selectors في CSS - Selector [attribute = \"value\"]")
3. Selector [attribute ~= "value"] :
و يحدد العناصر التي تحتوي على السمة المحددة (attribute) وتكون قيمتها مطابقة أو تحتوي على القيمة المحددة (value) كجزء من قيمتها. ومع هذا النوع الـ Selector تقبل فقط المسافة كفاصل بين الكلمات في القية Value على سبيل المثال:
<!DOCTYPE html>
<html>
<head>
<style>
div {height : 20px; width :40px; border:2px solid blue; margin : 5px;}
[class ~="box"]{
background-color: yellow;
}
</style>
</head>
<body>
<h2>[attribute ~= "value"] Selector</h2>
<p>Just div boxes with a class attribute that matches with "box" or containing the "box" word, can gets a yellow background.</p>
<div class="box"></div>
<div class="Box1"></div>
<div class="box-2"></div>
<div class="box 3"></div>
<div class="box_4"></div>
<!--with [attribute ~="value"] just the space is acceptable between the "value" words.-->
</body>
</html>الـ Output للمثال:
![المحددات Selectors في CSS - Selector [attribute ~= "value"]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi976_VepJRMaMQEgIQzc6xRdfffOSj7cJqYJNyEZ-fstzp0b6HJ2Xi9BvzhR90kvL0RlKvod8nK0E2RTl2ZC4LYJN6K_9UtLAbR08vnZvDjN_FFymbbWz1tpTBHeJ445ODQKmZ4RI8Oa5nXg3pCiIRmx9UsVv0oxIJcvAD7qzgBKV4J1rJ5uOPAn9Xl_A/s1600/3-attribute_containing_value.png "المحددات Selectors في CSS - Selector [attribute ~= \"value\"]")
4. Selector [attribute |= "value"] :
يحدد العناصر التي تحتوي على السمة المحددة (attribute) وتكون قيمتها مطابقة للقيمة المحددة (value) أو تبدأ بالقيمة المحددة (value) مع علامة hyphen (-) بعدها. على سبيل المثال،
<!DOCTYPE html>
<html>
<head>
<style>
div {height : 20px; width :40px; border:2px solid blue; margin : 5px;}
[class|="box"]{
background-color: yellow;
}
</style>
</head>
<body>
<h2>[attribute |= "value"] Selector</h2>
<p>Only, div box with a "class" attribute that matches or starts the "box" word and use hyphen as separator, can gets a yellow background.</p>
<div class="box"></div>
<div class="box_1"></div>
<div class="the-box-2"></div>
<div class="box 3"></div>
<div class="box-4"></div>
<!--with [attribute|="value"] just the hyphen is acceptable between the "value" words. -->
</body>
</html>الـ Output للمثال:
![المحددات Selectors في CSS - Selector [attribute |= "value"]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXSNmg_bkHsWEjhI4Oa1Mb9unT_VnGsgOqPYJsJXYs5WEUup0E4Yhrs6m4fsuUqOOJZAu7QNP7rm8_e8Y6H6Jm4P-Srj-HvMPIqzeem-2QdgJxewB-jIbFzE8Lbt4uvqlc0WeeblWHAjPLt0GS2IvHCEPiVFbSMk6oZbfsHhY65q5wlnb8nuu5_c7GJmA/s1600/4-specified_value_followed%20by_hyphen.png "المحددات Selectors في CSS - Selector [attribute |= \"value\"]")
5. Selector [attribute ^= "value"] :
يحدد كل العناصر التي قيمة سمتها (attribute) مطابقة أو تبدأ قيمة سمتها بالقيمة المحددة (value) على سبيل المثال :
<!DOCTYPE html>
<html>
<head>
<style>
div {height : 20px; width :40px; border:2px solid blue; margin : 5px;}
[class^="box"]{
background-color: yellow;
}
</style>
</head>
<body>
<h2>[attribute ^= "value"] Selector</h2>
<p>All, div boxes with a "class" attribute that matches or started the "box" word, can gets yellow background.</p>
<div class="box"></div>
<div class="Box1"></div>
<div class="box-2"></div>
<div class="box 3"></div>
<div class="box_4"></div>
<!--with [attribute^="value"] all the "class" attributes statrt with "box" are acceptable -->
</body>
</html>الـ Output للمثال:
![المحددات Selectors في CSS - Selector [attribute ^= "value"]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCBS-J2IMYpxhIdYxNICKDIWlBX1tcYoElUHwvfaaeRLqlWCvfJefgxBfadpqey2TXxdEZh8crEm6iiLoL0teqJgP4CCWccHmAkLYwLjh4_BqrW4Ec_2VX6CKlRgx-6Tad2p2XwbeR6o286gPUPqtseZZyDVCroXbQoaQHIubaZmq30uvvxbUH-PbNUFk/s1600/5-specified_value_statrt_with.png "المحددات Selectors في CSS - Selector [attribute ^= \"value\"]")
6. Selector [attribute $= "value"] :
يحدد فقط العناصر التي قيمة سمتها (attribute) مطابقة أو تنتهي القيمة المحددة (value) على سبيل المثال :
<!DOCTYPE html>
<html>
<head>
<style>
div {height : 20px; width :40px; border:2px solid blue; margin : 5px;}
[class$="box"]{
background-color: yellow;
}
</style>
</head>
<body>
<h2>[attribute $= "value"] Selector</h2>
<p>Only, div boxes with a "class" attribute that matches or ended the "box" word,can gets a yellow background.</p>
<div class="box"></div>
<div class="Box1"></div>
<div class="the-(2)-box"></div>
<div class="the(3) box"></div>
<div class="box_4"></div>
<!--with [attribute$="value"] all the "class" attributes ends with "box" are acceptable -->
</body>
</html>الـ Output للمثال:
![المحددات Selectors في CSS - Selector [attribute $= "value"]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilfVkLy_znVAvZW3kyFISymYSiWv0ETdmztd7RI5fzp9rg6pxghJbqkioVIuHk4pEmIpuuUoGJrF355Rzk4g7umtgQGkgYTg5ZzaPYZ7Mr9Py2ztvi7jRdHEnihiSOJoT9A6aanJcwUC_2fUdqMeLKfcMr2zYDQlzzoi_9SkcfrwqE-fvXRVRhP5ar65Y/s1600/6-specified_value_end_with.png "المحددات Selectors في CSS - Selector [attribute $= \"value\"]")
7. Selector [attribute *= "value"]:
يحدد جميع العناصر التي تتطابق أو تحتوي قيمة سمتها (attribute) على القيمة المحددة (value) في أي مكان داخل قيمتها. على سبيل المثال:
<!DOCTYPE html>
<html>
<head>
<style>
div {height : 20px; width :40px; border:2px solid blue; margin : 5px;}
[class*="box"]{
background-color: yellow;
}
</style>
</head>
<body>
<h2>[attribute *= "value"] Selector</h2>
<p>All div boxes that with a "class" attribute matches or contains the "box" word, can get a yellow background .</p>
<div class="box"></div>
<div class="Box1"></div>
<div class="the-box-2"></div>
<div class="box 3"></div>
<div class="box_4"></div>
<!--with [attribute*="value"] all the "class" attributes contains the "box" are acceptable -->
</body>
</html>الـ Output للمثال:
![المحددات Selectors في CSS - Selector [attribute *= "value"]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF9tsluu-t8I5UFO5bwvBVA8m8KfaepRvc7kvEROaRXzLzEt_VtASwlnYwakBeB2o9u9ehaF-sFUPg1Y-CWa_Rf3iSrAxONraKJTr6s4ppkxD7Rx0eiRe1qw9BevrgbDSFA4lYRMQw378F_W8N6R1t8X8UuMf4qrlA8qkNupAM2tveV4wZARCABtd_jGU/s1600/7-specified_value_contains.png "المحددات Selectors في CSS - Selector [attribute *= \"value\"]")
جميع أمثلة هذا الجزء على الرابط.
هذه هي بعض محددات السمات (Attributes Selectors) الشائعة في CSS. يمكن استخدامها لتحديد العناصر بناءً على سماتها وقيمها المحددة، مما يوفر مزيدًا من المرونة في تحديد العناصر وتطبيق التنسيقات المناسبة لها.
قدمنا في هذا المقال فهم شامل للمحددات (Selectors) في CSS وأنواعها المختلفة. تعد هذه المحددات أدوات قوية وضرورية لتحقيق تنسيقات الويب المرغوبة وتخصيص التصميم وفقًا لاحتياجات المشروع الخاص بنا. كما يمكننا استخدام هذه المحددات بتركيبات مختلفة لتحديد العناصر التي نرغب في تطبيق أنماط التنسيق عليها بدقة وتحكم. فاستخدام هذه المحددات بشكل مركب لتحديد العناصر بشكل دقيق وتطبيق أنماط التنسيق المناسبة عليها. إن استخدام تلك المحددات بشكل متقن وذكي، يمكننا تحقيق التنسيقات المطلوبة وتوفير تجربة مستخدم فريدة ومبهرة على صفحات الويب.