التأثيرات الخاصة Pseudo-classes | ستايلات CSS

 

CSS Pseudo-classes  هي خاصية فريدة تسمح لك بتحديد عناصر HTML التي تخضع لحالة خاصة. ومن أشهرها :hover pseudo class التي تستهدف العناصر الموجودة تحت المؤشر و:visited pseudo class التي تمت زيارتها والتي تستهدف الروابط التي تمت زيارتها سابقًا.


تُستخدم Pseudo-classes لتحديد حالة خاصة للعنصر.

على سبيل المثال، يمكن استخدامها من أجل:

 ● تنسيق عنصر عند وضع الماوس عليه
 ● تنسيقات مختلفة للروابط التي تمت زيارتها والجديدة
 ● تنسيق عنصر عند التركيز عليه

The syntax of pseudo-classes

selector:pseudo-class {
property:value;
}

Anchor Pseudo-classes

يمكن عرض الروابط بطرق مختلفة:

/* unvisited link */
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */
a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}

Pseudo-classes and CSS Classes

يمكن دمج Pseudo-classes مع Classes في CSS.

في المثال التالي، عند تحريك الماوس فوق الارتباط المحدد، سيتغير لونه:

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

فئة Pseudo-hover: لـ <div>

مثال على استخدام فئة تشبه التمرير: على عنصر <div> كما يلي:

div:hover {
background-color: blue;
}

في المثال التالي، عندما يتم وضع مؤشر الماوس على عنصر <div>، يتم عرض عنصر <p> كتلميح أداة:

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

div:hover p {
display: block;
}

CSS - The :first-child Pseudo-class

الفئة The :first-child pseudo-class تحدد العناصر التي هي أول عنصر تابع لكل عنصر.

في المثال أدناه، يتم تحديد كل عنصر يمثل الطفل الأول لكل عنصر ويتغير لونه إلى اللون الأزرق.


p:first-child {
color: blue;
}

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

في المثال أدناه، يحدد selector العنصر <i> الأول في كل عنصر من عناصر <p>:

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

تحديد جميع العناصر <i> في كل العناصر <p> التي تمثل First-child

في المثال التالي، يحدد  selector  جميع العناصر <i> الموجودة في عناصر <p> وأن العناصر نفسها <p> هي أول العناصر الفرعية للعناصر الأخرى:


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

جميع Pseudo-class في CSS

SelectorExampleExample description
:activea:activeSelects the active link
:checkedinput:checkedSelects every checked <input> element
:disabledinput:disabledSelects every disabled <input> element
:emptyp:emptySelects every <p> element that has no children
:enabledinput:enabledSelects every enabled <input> element
:first-childp:first-childSelects every <p> elements that is the first child of its parent
:first-of-typep:first-of-typeSelects every <p> element that is the first <p> element of its parent
:focusinput:focusSelects the <input> element that has focus
:hovera:hoverSelects links on mouse over
:in-rangeinput:in-rangeSelects <input> elements with a value within a specified range
:invalidinput:invalidSelects all <input> elements with an invalid value
:lang(language)p:lang(it)Selects every <p> element with a lang attribute value starting with "it"
:last-childp:last-childSelects every <p> elements that is the last child of its parent
:last-of-typep:last-of-typeSelects every <p> element that is the last <p> element of its parent
:linka:linkSelects all unvisited links
:not(selector):not(p)Selects every element that is not a <p> element
:nth-child(n)p:nth-child(2)Selects every <p> element that is the second child of its parent
:nth-last-child(n)p:nth-last-child(2)Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)p:nth-last-of-type(2)Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)p:nth-of-type(2)Selects every <p> element that is the second <p> element of its parent
:only-of-typep:only-of-typeSelects every <p> element that is the only <p> element of its parent
:only-childp:only-childSelects every <p> element that is the only child of its parent
:optionalinput:optionalSelects <input> elements with no "required" attribute
:out-of-rangeinput:out-of-rangeSelects <input> elements with a value outside a specified range
:read-onlyinput:read-onlySelects <input> elements with a "readonly" attribute specified
:read-writeinput:read-writeSelects <input> elements with no "readonly" attribute
:requiredinput:requiredSelects <input> elements with a "required" attribute specified
:rootrootSelects the document's root element
:target#news:targetSelects the current active #news element (clicked on a URL containing that anchor name)
:validinput:validSelects all <input> elements with a valid value
:visiteda:visitedSelects all visited links




كلمات مفتاحية: