مرجع css

محددات انتقاء العناصر

بتاريخ: 12-04-2015   

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

مُحدّدات إنتقاء العناصر في لغة CSS
محددات الإنتقاءمثالتعريفإصدار CSSمثال للإستئناس
.class.contentاختيار جميع العناصر التي تحتوي على صفة class="content"1مشاهدة المثال
#id#logoاختيار العنصر الذي يحتوي على الصفة id="logo"1مشاهدة المثال
**اختيار جميع العناصر2مشاهدة المثال
العنصرpاختيار جميع عناصر <p>1مشاهدة المثال
عنصر2,عنصر1h1, h2اختيار جميع عناصر <h1> و جميع عناصر <h2>1مشاهدة المثال
عنصر2 عنصر1div pاختيار جميع عناصر <p> الموجودة داخل عنصر <div>1مشاهدة المثال
عنصر2 < عنصر1div > pاختيار جميع عناصر <p> حيث الوسم الأب هو <div>2مشاهدة المثال
عنصر2 + عنصر1div + pاختيار أول عنصر من عناصر <p> الموجودة مباشرة بعد عناصر <div>2مشاهدة المثال
عنصر2 ~ عنصر1p ~ ulاختيار جميع عناصر <ul> المسبوقة و لو بعنصر <p> واحد . شرط أن يكون للعنصرين نفس الأب3مشاهدة المثال
الصفة[target]اختيار جميع العناصر التي تحتوي على صفة target2مشاهدة المثال
الصفة = القيمة[target=_blank]اختيار جميع العناصر التي تحتوي على target="_blank"2مشاهدة المثال
الصفة~= القيمة[title~=css3]اختيار جميع العناصر التي تحتوي على صفة title و التي تضم قيمتها كلمة "css3"2مشاهدة المثال
الصفة|=القيمة[lang|=ar]اختيار جميع العناصر التي تحتوي على صفة lang و التي تبدأ قيمتها برمز "ar"2مشاهدة المثال
الصفة^=القيمةdiv[class^="menu"]اختيار جميع عناصر <div> التي تبدأ فيها الصفة class بقيمة "menu"3مشاهدة المثال
الصفة$=القيمةdiv[class$="menu"]اختيار جميع عناصر <div> التي تنتهي فيها الصفة class بقيمة "menu"3مشاهدة المثال
الصفة*=القيمةdiv[class*="menu"]اختيار جميع عناصر <div> التي تحتوي فيها الصفة class على كلمة "menu"3مشاهدة المثال
:activea:activeاختيار الرابط أثناء النقر عليه1مشاهدة المثال
:hovera:hoverاختيار الرابط أثناء مرور مؤشر الفأرة فوقه1
:linka:linkاختيار الروابط التي لم تتم زيارتها1
:visiteda:visitedاختيار الروابط التي تمت زيارتها1
::beforep::beforeإضافة محتوى قبل جميع عناصر <p>3مشاهدة المثال
::afterp::afterإضافة محتوى بعد جميع عناصر <p>3
:checkedinput:checkedاختيار جميع عناصر <input> التي يتم اختيارها (نقرها)3مشاهدة المثال
:disabledinput:disabledاختيار جميع عناصر <input> الغير المفعّلة disabled3مشاهدة المثال
:enabledinput:enabledاختيار جميع عناصر <input> المفعّلة enabled3
:focusinput:focusاختيار عنصر <input> الذي يتم النقر داخله2مشاهدة المثال
:in-rangeinput:in-rangeاختيار عناصر <input> ذات قيمة تنتمي للنطاق المحدد3مشاهدة المثال
:out-of-rangeinput:out-of-rangeاختيار عناصر <input> ذات قيمة لا تنتمي للنطاق المحدد3
:validinput:validاختيار جميع عناصر <input> ذات القيمة الصحيحة3مشاهدة المثال
:invalidinput:invalidاختيار جميع عناصر <input> ذات القيمة الخاطئة3
:requiredinput:requiredاختيار جميع عناصر <input> التي تحتوي على صفة"required"3مشاهدة المثال
:optionalinput:optionalاختيار جميع عناصر <input> التي لا تحتوي على صفة"required"3
:read-onlyinput:read-onlyاختيار جميع عناصر <input> التي تحتوي على صفة"readonly"3مشاهدة المثال
:read-writeinput:read-writeاختيار جميع عناصر <input> التي لا تحتوي على صفة"readonly"3
:emptydiv:emptyاختيار جميع عناصر <div> التي لا تحتوي على أبناء و لا على نص3مشاهدة المثال
::first-letterp::first-letterاختيار الحرف الأول من جميع عناصر <p>1مشاهدة المثال
::first-linep::first-lineاختيار السطر الأول من جميع عناصر <p>1مشاهدة المثال
:first-childp:first-childاختيار عناصر <p> التي تعتبر الإبن الأول للوسم الأب2مشاهدة المثال
:last-childp:last-childاختيار عناصر <p> التي تعتبر الإبن الأخير للوسم الأب3مشاهدة المثال
:only-childp:only-childاختيار عناصر <p> التي تكون الإبن الوحيد للوسم الأب3مشاهدة المثال
:nth-child(n)p:nth-child(2)اختيار عنصر <p> إذا كان الإبن الثاني للوسم الأب3مشاهدة المثال
:nth-last-child(n)p:nth-last-child(2)اختيار عنصر <p> إذا كان الإبن الثاني للوسم الأب ، بدءا من الإبن الأخير3مشاهدة المثال
:first-of-typep:first-of-typeاختيار أول عنصر <p> من بين أبناء العنصر الأب3مشاهدة المثال
:last-of-typep:last-of-typeاختيار آخر عنصر <p> من بين أبناء العنصر الأب3مشاهدة المثال
:nth-of-type(n)p:nth-of-type(3)اختيار ثالث عنصر <p> من بين أبناء العنصر الأب3مشاهدة المثال
:nth-last-of-type(n)p:nth-last-of-type(2)اختيار ثاني عنصر <p> من بين أبناء العنصر الأب ، بدءا من الأسفل3مشاهدة المثال
:only-of-typep:only-of-typeاختيار كل عنصر <p> شرط أن يكون عنصر الفقرة الوحيد في الوسم الأب3مشاهدة المثال
:not(selector):not(div)اختيار كل العناصر ما عدا عناصر div3مشاهدة المثال
:lang(language)div:lang(en)اختيار كل عناصر div التي تضم صفة "lang" و التي تساوي قيمتها "en"2مشاهدة المثال