محددات CSS

محدد CSS هو نمط يستخدم لتنسق العناصر في وثيقة HTML. سيطبق قواعد النمط على العناصر التي تطابق نمط المحدد.

ما هو المحدد

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

المحدد العام

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

* {
　　　　margin: 0;
　　　　padding: 0;
　　}

*سيطبق قواعد النمط داخل المحدد على كل عنصر في الوثيقة.

محدد نوع العنصر

سيقوم محدد نوع العنصر بمطابقة كل مثال على العنصر في شجرة الوثيقة مع اسم نوع العنصر الم相应.

p {
　　　　color: blue;
　　}

pسيطبق قواعد النمط في المحدد<p>كل عنصر في الوثيقة، مما يجعله لونًا أزرق، بغض النظر عن موقعه في شجرة الوثيقة.

المحاور المختارة المحددة

المحاور المختارة المحددة يُستخدم لتعيينفريدأووحيدالعنصر يحدد القواعد النمطية.

تعريف المحاور المختارة هو العلامة المثلثة (#)#عندما يتبعه معرف ID.

#error {
　　　　color: red;}

سيكون هذا النمط النمطيidالعناصر التي تم تعيين الخاصية فيها تنظر النص بلون أحمرerror.

المحاور المختارة الكلاسيكية

المحاور المختارة الكلاسيكية يمكن استخدامها لاختيار العناصر التي تحتوي علىclassأي عنصر HTML يحتوي على الخاصية. سيتم تنسيق جميع العناصر التي تحتوي على هذا الصنف وفقًا للقواعد المحددة.

باستخدام نقطة (.).عندما يتبعها تعريف القيمة الكلاسيكية.

.blue {
　　　　color: blue;
　　　　　　}

القواعد النمطية أعلاه ستكونclassيظهر النص للعناصر التي تم تعيين الخاصية فيها في الوثيقة باللون الأزرقblueيمكنك جعلها أكثر تحديدًا. على سبيل المثال:

p.blue {
　　　　color: blue;
　　　　}

القواعد النمطية داخل الملف المختارp.blueفقط<p>لتحديدclassالعناصر التي تم تعيين الخاصية لها تظهر بلون أزرقblue، ولا تؤثر على الفقرات الأخرى.

المحاور الفرعية

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

ul.menu li a {
　　　　text-decoration: none;
　　　　}
h1 em {
　　　　color: green;
　　　　}

القواعد النمطية داخل الملف المختارul.menu li aفقط ينطبق على<a>الموجودة داخل العنصر الذي يحتوي على classقائمة غير مرتبةالموجودة داخل.menu، ولا تؤثر على الروابط الأخرى في الوثيقة. وبالمثل،h1 emالقواعد النمطية داخل الملف المختار تنطبق فقط على<em>العناصر الموجودة داخل<h1>.

المحاور الفرعية

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

ul > li {
　　　　list-style: square;
　　　　}
ul > li > ol {
　　　　list-style: none;
　　　　}

القواعد النمطية داخل الملف المختارul > liفقط ينطبق على<li>كـ<ul>العناصر التي تكون مستقلة عن العناصر الأخرى في القائمة.

المحاور المختارة المتجاورة

المحاور المختارة المتجاورة يمكن استخدامها لاختيار العناصر الم同级. جملة هذا الملف المختارة تشبه: E1 + E2، حيث يكون E2 هو هدف الملف المختار.

h1 + pفي المثال التالي من الملفات المختارة<p>فقط في<h1>و<p>العنصر في شجرة الوثيقة مشترك في نفس السلسلة الأبوية و<h1>يتبع ذلك<p>في حالة اختيار العنصر قبل العنصر، هذا يعني أن كل<h1>الفقرة بعد العنوان才有 النمط المطلوب.

h1 + p {
　　　　color: blue;
　　　　font-size: 18px;
　　　　}
ul.task + p {
　　　　color: #f0f;
　　　　text-indent: 30px;
　　　　}

المختار المماثل للإخوة

المختار المماثل لل同级 المماثل (E1 + E2) ولكن ليس صارمًا. المختار المماثل يتكون من مختارين بسيطين، يتم فصلهم بمحرف الموجة (〜）بمجرد فصلها بالخط الفاصل. يمكن كتابتها كما يلي: E1〜E2، حيث يكون E2 هدفاً للمختار.

المختار في المثال التاليh1 ~ pسيُختار هذا<p>قبل العنصر<h1>جميع العناصر، حيث تشترك جميع العناصر في نفس العنصر الأم في شجرة الوثيقة.

h1 ~ p {
　　　　color: blue;
　　　　font-size: 18px;
　　　　}
ul.task ~ p {
　　　　color: #f0f;
　　　　text-indent: 30px;
　　　　}

هناك مزيد من المختارات مثل المختار الخاص بالخصائص، المخططات الوهمية، العناصر الوهمية. سنناقش هذه المختارات في الفصول القادمة.

اختيار تجميع

عادةً ما تشترك المختارات المتعددة في النمط الخاص بها في قواعد النمط. يمكنك تجميعها في قائمة مفصولة بالكومات، مما يقلل من كود النمط. يمكن أن يمنع أيضًا تكرار القواعد النمطية.

h1 {
　　　　font-size: 36px;
　　　　font-weight: normal;
　　　}
h2 {
　　　　font-size: 28px;
　　　　font-weight: normal;
　　　}
h3 {
　　　　font-size: 22px;
　　　　font-weight: normal;
　　　}

كما يمكنك رؤيتها في المثال أعلاه، نفس قواعد النمطfont-weight: normal;مشاركة الاختيارh1،h2وh3لذلك، يمكن تقسيمها إلى قائمة مفصولة بالكومات، مثلما هو موضح أدناه:

h1, h2, h3 {font-weight: normal;}
h1 {font-size: 36px;}
h2 {font-size: 28px;}
h3 {font-size: 22px;}