info@semi-colen.com 002-010-90-2500-88
May 29, 2020 - بواسطة مشرف

محددات css - الجزء الثاني

  • محددات الفئات "class" الزائفة  Pseudo selectors class


ما هي الفئات الزائفة؟

يتم استخدام الفئات الزائفة لتحديد حالة خاصة من عنصر.

يمكن دمج الفئات الزائفة مع الفئات في CSS:

مثال

a.highlight: hover  {
  color :  # ff0000 ؛
}}


* التمرير "Hover" على <div>

مثال على استخدام محددات الفئة "class" المزيفة على عنصر <div>

مثال

div:hover {
  background-color: blue;
}

تمرير "Hover" الأدوات البسيطة

مثال

{
  display: none;
  background-color: yellow;
  padding: 20px;
}


div:hover p {
  display: block;
}


1- أول فئة فرعية زائفة في CSS


يطابق أول فئة فرعية زائفة للعنصر المحدد وهو العنصر الفرعي الأول لعنصر آخر.


*  تطابق العنصر الأول <p>


في المثال التالي ، يتطابق المحدد مع أي عنصر <p> يمثل أول عنصر فرعي في أي عنصر:

مثال

p:first-child {
  color: blue;
}

* تطابق العنصر الأول  <i>في جميع عناصر <p>

في المثال التالي ، يطابق المحدد العنصر <i> الأول في جميع عناصر <p>

p i:first-child {
  color: blue;
}

* تطابق جميع العناصر <i> في جميع العناصر الفرعية الأولى <p>

في المثال التالي ، يتطابق المحدد مع كل العناصر <i> في عناصر <p> التي تمثل أول عناصر فرعية آخرى :

مثال

p:first-child i {
  color: blue;
}


2- فئة اللغات الزائفة 

تتيح لك فئة اللغات تحديد قواعد خاصة للغات المختلفة.



    في المثال أدناه ،: اللغات تحدد علامات الاقتباس للعناصر <p> مع "lang = "no

    مثال



     
      


    • محددات السمة "Attribute"Attribute selectors: -

    نمط عناصر HTML مع سمات محددة  Style HTML Elements With Specific Attributes


    من الممكن نمط عناصر HTML ان تكون لها سمات أو قيم سمات محددة.


    محدد [سمة Attribute] 

    يتم استخدام محدد [السمة "Attribute"] لتحديد العناصر ذات السمة المحددة.

    يحدد المثال التالي جميع العناصر &lt;a&gt; ذات سمة الهدف:

    مثال

    a[target] {
      background-color: yellow;
    }


    1- محدد [السمة = "قيمة" "attribute*="value

    يتم استخدام محدد [السمة = "القيمة"] لتحديد العناصر ذات السمة والقيمة المحددة.

    يحدد المثال التالي جميع &lt;a&gt; العناصر ذات السمة "هدف" "_فارغ":

    مثال

    a[target="_blank"] { 
      background-color: yellow;
    }

    2- محدد [سمة ~ = "قيمة" "attribute ="value

    يتم استخدام محدد [السمة ~ = "القيمة"] لتحديد العناصر التي تحتوي على قيمة السمة التي تحتوي على كلمة محددة.


    يحدد المثال التالي جميع العناصر التي لها سمة عنوان تحتوي على قائمة مفصولة بمسافة من الكلمات ، واحدة منها عبارة "وردة":

    مثال

    [title~="وردة"] {
      border: 5px solid yellow;
    }

    3- محدد [سمة | = "قيمة" "attribute | ="value

    يتم استخدام محدد [السمة | = "القيمة"] لتحديد العناصر ذات السمة المحددة التي تبدأ بالقيمة المحددة.


    4- يحدد المثال التالي جميع العناصر التي لها قيمة سمة للفصل تبدأ بـ "top":


    ملاحظة: يجب أن تكون القيمة عبارة عن كلمة بأكملها ، إما بمفردها ، مثل "class = "top ، أو متبوعة بوصل (-) ، مثل "class = "top-text"


    5- محدد [سمة ^ = "قيمة" "attribute^="value

    يتم استخدام محدد [السمة ^ = "value"] لتحديد العناصر التي تبدأ قيمة السمة الخاصة بها بقيمة محددة.


    يحدد المثال التالي جميع العناصر التي لها قيمة سمة للفصل تبدأ بـ "top":

    مثال

    [class^="top"] {
      background: yellow;
    }

    ملاحظة: القيمة لا يجب أن تكون كلمة كاملة!


    6- محدد [سمة $ = "قيمة" "attribute$="value

    يتم استخدام محدد [السمة $ = "value"] لتحديد العناصر التي تنتهي قيمة السمة لها بقيمة محددة.


    يحدد المثال التالي جميع العناصر التي لها قيمة سمة للفئة تنتهي بـ "test":

    مثال

    [class $ = "test"]  {
      الخلفية :  أصفر ؛
    }}

    ملاحظة: القيمة لا يجب أن تكون كلمة كاملة.


    7- محدد [سمة * = "قيمة"  " سمة * =" قيمة

    يتم استخدام محدد [السمة * = "القيمة"] لتحديد العناصر التي تحتوي على قيمة السمة الخاصة بها على قيمة محددة.


    يحدد المثال التالي جميع العناصر التي لها قيمة سمة فئة تحتوي على "te":

    مثال

    [class * = "te"]  {
      الخلفية :  أصفر ؛
    }}

    ملاحظة: القيمة لا يجب أن تكون كلمة كاملة.



    * أشكال التصميم


    يمكن أن تكون محددات السمات المفيدة لنماذج التصميم دون فئة أو معرف.