المُختار Selector وهو اسم الفاعل من الفعل اختار.
وهو يعني الطريقة التي تتم من خلالها إختيار عناصر وثيقة الـ HTML
معرفتك كيفية تحديد العنصر الذي تريده من أهم النقاط الأساسية في تعلمك لغة التنسيق CSS ولغة javaScript لإختيار العناصر عبر الـ queryselector و بعض المكتبات التي تستخدم نفس نمط الإختيار المستخدم في لغة التنسيق CSS كمكتبة jQuery وغيرها الكثير من مكتبات الـ DOM ويعرف هذا النمط باسم "CSS selctor" أي نفس النط المستخدم في الإختيار في لغة التنسيق CSS.
لنتفق أولاً على بعض المفاهيم والمصطلحات الهامة والتي ستساعدنا على فهم الموضوع بشكل أفضل
element : عنصر
tag : وسم
attribute : خاصية
value : قيمة
id : معرف
class : فئة
ملحوظة: تخطى الجزء التالي إن كانت على علم بلغة الهيكلة HTML.
تتكون وثيقة HTML من مجموعة من العناصر وكل عنصر تكون له عدة خصائص من الممكن أن تكون هنا خصائص مشتركه لأكثر من عنصر.
كل عنصر من هذه العناصر يكون له اسم مميز له ويتكون هذا العنصر من وسمين وسم للفتح ووسم للإغلاق ويكون بهذا الشكل:
1- وسم الفتح open tag:
<element>
ويتكون وسم الفتح من علامة أصغر من > ثم اسم العنصر ثم علامة أكبر من <
2- وسم الإغلاق close tag:
<element/>
ويتكون وسم الإغلاق من علامة أصغر من > ثم اسم العنصر ثم العلامة / ثم علامة أكبر من < - بين وسمي الفتح والإغلاق يتم وضع المحتوى، ويمكن للعناصر أن تحوي بداخلها عناصر أخرى.
ملاحظة: هناك عناصر وحيدة الوسم.
هذا هيكلة لوثيقة HTML في شكلها البسيط
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>صفحة تجربة</title>
</head>
<body>
<h1>العنوان الأول</h1>
</body>
</html>
تفصيل هذا الكود
<!DOCTYPE html>
هذا وسم لتعريف أن هذه الوثيقة هي الإصدار الخامس من لغة الهيكله HTML العنصر html وهو العنصر الأساسي الذي بداخله جميع عناصر الصفحة العنصر head وهو العنصر الذي يحتوي بداخله خصائص الصفحة ولا تظهر في جسم الصفحة العنصر title وهو عنصر اسم الصفحة الحالية الذي يظهر في التويب في المتصفح وهو أحد أبنا عنصر الـ head العنصر meta ومن أحد خصائصه وهو charset وتكون قيمة هذه الخاصية هي ترميز الصفحة الحالية وهنا نستخدم الترميز UTF-8
المُختار
1- الوصول لجميع عناصر الصفحة نستخدم العلامة * كالتالي:
*{color: #F00;}
هذا يعني أن جميع العناصر سيكون لو الخط بها أحمر
http://codepen.io/ahmedsaou...2- الوصول للعنصر من خلال اسمه كالتالي:
div {color: #F00;}
هذا يعني أن جميع الـ div سيكون لو الخط بها أحمر
http://codepen.io/ahmedsaou...3- الوصول للعنصر من خلال المعرف id كالتي:
#myID {color: #F00;}
هذا يعني أن العنصر الذي يحمل خاصية المعرف id وقيمة هذا المعرف هي myID سيكون لون الخط لهذا العنصر هو اللون الأحمر.
http://codepen.io/ahmedsaou...4- الوصول للعنصر من خلال الفئة class كالتالي:
.myClass {color: #F00;}
هذا يعني أن العنصر الذي يحمل خاصية الفئة class وقيمة هذا الفئة هي myClass سيكون لون الخط لهذه العناصر والتي تحمل نفس اسم الفئة هو اللون الأحمر.
http://codepen.io/ahmedsaou...5- الوصول للعنصر من خلال اسم العنصر والفئة معاً كالتالي:
div.myClass {color: #F00;}
هذا يعني أن جميع العناصر من النوع div والتي تحمل خاصية الفئة class وقيمة هذا الفئة هي myClass سيكون لون الخط لهذه العناصر هي اللون الأحمر.
http://codepen.io/ahmedsaou...ملاحظة: يمكن تطبيق رقم 5 مع المعرف أيضاً ولكن بطبيعة الحالة المعرف يعني عنصر فريد في الوثيقة ولا يجب تكرار نفس المعرف لأي عنصر أخر داخل الوثيقة، ففي حال عدم تكرارك لأي معرف في الوثيقة لست بحاجة للخطوة 5 مع العناصر التي تحوي خاصية المعرف.
6- تطبيق تنسيق واحد على أكثر من مُختار ستستخدم الفاصلة , للفصل بين مختارات العناصر كالتالي:
div, p, #main, .red {color: #F00;}
جميع عناصر الـ div و p والعنصر ذات المعرف main والعناصر ذات الفئة red سيكون لون الخط بها هو اللون الأحمر.
http://codepen.io/ahmedsaou...7- إختيار عناصر داخل عناصر أخرى سيتم إستخدام مسافة فارغة للدلالة على هذا كالتالي:
div p {color: #F00;}
جميع عناصر الـ p الموجودة داخل عناصر الـ div سيكون لون الخط بها هو اللون الأحمر.
http://codepen.io/ahmedsaou...8- إختيار عناصر داخل عناصر أخرى ولكن بمستوى واحد أي العناصر الأبناء من الدرجة الأولى فقط ويتم إستخدام العلامة < لهذا الغرض كالتالي:
div > p {color: #F00;}
جميع العناصر الـ p والتي تكون أبناء مباشرة لعناصر الـ div سيكون لون الخط بها هو اللون الأحمر.
http://codepen.io/ahmedsaou...9- إختيار عناصر تقع بعد عناصر أخرى مباشراً ويتم إستخدام العلامة + لهذا الغرض كالتالي:
div+p {color: #F00;}
جميع عناصر الـ p التي تقع مباشراً بعد عنصر الـ div سيكون لون الخط بها هو اللون الأحمر.
http://codepen.io/ahmedsaou...10- إختيار عناصر يسبقها عنصر معين ويتم إستخدام العلامة ~ لهذا الغرض كالتالي:
div ~ p {color: #F00;}
جميع عناصر الـ p والتي سبقها وجود عنصر الـ div سيكون لون الخط بها هو اللون الأحمر.
http://codepen.io/ahmedsaou...ملاحظة: يمكن تطبيق الخطوات 7,8,9,10 على أي من أنواع المُختارات الأخرى.
11- إختيار العنصر من خلال اسم خاصية به كالتالي:
[title] {color: #F00;}
جميع العناصر التي تحتوي على الخاصية title سيكون لون الخط بها هو اللون الأحمر.
http://codepen.io/ahmedsaou...12- إختيار العنصر من خلال اسم الخاصية وقيمتها كالتالي:
[name=email] {color: #F00;}
جميع العناصر التي تحتوي على الخاصية name وقيمتها هي email سيكون لون الخط بها هو اللون الأحمر.
http://codepen.io/ahmedsaou...13- إختيار العنصر من خلال إحتواء قيمة خاصية معينة على كلمة معينة غير متصلة بما قبلها كالتالي:
[title~=ahmed] {color: #F00;}
جميع العناصر التي تحتوي على الخاصية title وتحتوي قيمة هذه الخاصية على الكلمة ahmed سيكون لون الخط بها هو اللون الأحمر.
http://codepen.io/ahmedsaou...14- إختيار العنصر من خلال إحتواء قيمة خاصية معينة على نص معين كالتالي:
[title*=ahmed] {color: #F00;}
جميع العناصر التي تحتوي على الخاصية title وتحتوي قيمة هذه الخاصية على النص ahmed سيكون لون الخط بها هو اللون الأحمر.
http://codepen.io/ahmedsaou...15- إختيار العنصر من خلال بداية قيمة خاصية معينة بنص معين كالتالي:
[title^=ahm] {color: #F00;}
جميع العناصر التي تحتوي على الخاصية title وقيمة هذه الخاصية تبدأ بـ ahm سيكون لون الخط بها هو اللون الأحمر.
http://codepen.io/ahmedsaou...16- إختيار العنصر من خلال بداية قيمة خاصية معينة بنص معين ويفصل بين نصوصها بعلامة - كالتالي:
[class|=header] {color: #F00;}
جميع العناصر التي تحتوي على الخاصية class وقيمة هذه الخاصية تبدأ بـ header كمثال header-left سيكون لون الخط بها هو اللون الأحمر.
http://codepen.io/ahmedsaou...17- إختيار العنصر من خلال نهاية قيمة خاصية معينة بنص معين كالتالي:
a[href$=".pdf"] {color: #F00;}
جميع عناصر الـ a والتي تحتوي على الخاصية href وقيمة هذه الخاصية تنتهي بـ pdf. سيكون لون الخط لها هو اللون الأحمر.
http://codepen.io/ahmedsaou...
التعليقات