يتم استخدام محددات CSS في العنصر الهدف، وإخفاء العنصر والانتظار حتى تحدد ميزات العنصر عنصرًا واحدًا أو أكثر من عناصر HTML. النوعان الرئيسيان لمحددات CSS هما إما الاختيار حسب المعرف أو الفئة. يحتوي عنصر HTML على معرف إذا كان يحتوي على سمة المعرف كما هو موضح أدناه.
<span id="myidentifier">Example Text</span>
لتحديده، يمكنك إنشاء محدد CSS مثل #myidentifier
إذا كان عنصر HTML يحتوي على فئة، فسيكون له سمة الفئة كما هو موضح في هذا المثال.
<div> <span class="myclass">Example Text One</span> <span class="myclass">Example Text Two</span> <span class="myclass">Example Text Three</span> </div>
لتحديده، يمكنك إنشاء محدد CSS مثل .myclass
إذا كنت تريد تحديد عنصر معين مع فئة myclass يمكنك استخدام محددات CSS القياسية للقيام بذلك في هذه الحالة الطفل التاسع(2) محدد مثل ذلك: .myclass:nth-child(2) لتحديد نطاق myclass الثاني. ومع ذلك، لن ينجح هذا إلا في هذه الحالة لأنه لا توجد عناصر أخرى ضمن عنصر div الأصلي. إذا كان هناك عنصر ap على سبيل المثال فإنه سيغير مؤشر nth-child.
في بعض الأحيان، لا يحتوي عنصر HTML الذي تحتاج إلى تحديده على معرف أو فئة فريدة داخل الصفحة. عند تحديد عناصر HTML هذه، يلزم وجود محدد CSS أكثر تعقيدًا.
<div class="Header">
<a href="https://www.example.com/">
<div>...</div>
</a>
<div class="SearchBar">...</div>
<div class="TagLine">...</div>
</div>
على سبيل المثال، في المثال أعلاه، نريد تحديد عنصر DIV داخل الرابط. للقيام بذلك، نحن بحاجة إلى تحديد محدد CSS الذي يعمل أسفل DIV الفريد مع ملحق Header فئة.
div.Header a div
تعد محددات CSS ميزة قياسية لتطوير الويب. هذه المقالة تعطي لمحة جيدة عن كيفية استخدام محددات CSS.
إذا تم إرجاع عناصر HTML متعددة من محدد CSS وكنت تستخدم العنصر الهدف أو تنتظر ميزات العنصر، فسيتم استخدام العنصر المطابق الأول فقط. ومع ذلك، إذا كنت تستخدم ميزة إخفاء العنصر، فسيتم إخفاء جميع عناصر HTML المطابقة.
إذا أردت إخفاء عناصر متعددة بمعرفات أو فئات مختلفة، فيمكنك القيام بذلك عن طريق فصل كل محدد CSS بفاصلة. لذلك، على سبيل المثال، لإخفاء فئة المثال والمعرف أعلاه، يمكنك استخدام ما يلي #myidentifier,.myclass