CSS Pseudo Classes
تحديد العناصر عن طريق الحالة في لغة CSS
سوف تتعلم في هذا الدرس كيفه اختيار العناصر علي حسب حالة معينة لإضافة style عليها في لغة CSS وتسمي هذه الطريقة Pseudo Classes.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Pseudo Classes
تحديد العناصر عن طريق الحالة في لغة CSS
</>
CSS Pseudo Classes
تحديد العناصر عن طريق الحالة في لغة CSS
Pseudo Classes هي تحديد العناصر بناء علي حالة معينة في لغة CSS.
أمثلة علي Pseudo Classes وحالات العنصر في لغة CSS:
- تحديد العنصر عند تمرير مؤشر mouse أعلاه.
- تحديد الرابط عند زيارته.
- تحديد العنصر عند التركيز عليه أو الوقوف عليه.
CSS pseudo classes syntax
طريقة كتابة pseudo classes في لغة CSS.
selector:pseudo-class
{
property: value;
}
</>
CSS Link Selectors
تحديد حالات الروابط في لغة CSS
CSS link selectors active
عند الضغط علي الرابط سوف يتم تغيير لون الخلفية ولون نص الرابط.
a:active
{
background-color: red;
color:white;
}
CSS link selectors hover
عند تمرير مؤشر Mouse علي العنصر سوف يتغير لونه ولون الخلفية.
a:hover
{
background-color: red;
color:white;
}
CSS link selectors visited
يتم تغيير لون الرابط إذا تمت زيارته إلي لون مختلف.
a:visited
{
color: red;
}
CSS link selectors link
عن طريق حالة link يمكن إضافة style علي الرابط الذي لم يتم زيارته.
a:link
{
background-color: red;
color:white;
}
after ::
في هذا النوع يتم إضافة قيمة معينة بعد المحتوي الموجود بداخل كل عنصر من نوع معين ففي المثال التالي سوف يتم إضافة نص معين بعد المحتوي الموجود بداخل كل عنصر من النوع <p>
p::after {
content: " - Remember this";
}
before ::
في هذا النوع يتم إضافة قيمة معينة قبل المحتوي الموجود بداخل كل عنصر من نوع معين ففي المثال التالي سوف يتم إضافة نص معين قبل المحتوي الموجود بداخل كل عنصر من النوع <p>
p::before {
content: "Read this: ";
}
checked :
يقوم هذا النوع باختيار جميع العناصر التي يتم النقر عليها مثل (radio buttons و chekboxes ) ففي المثال التالي سوف يتم تعيين العرض width والارتفاع height الخاص بكل العناصر من النوع <input>
input:checked {
height: 50px;
width: 50px;
}
default :
في هذا النوع يتم اختيار جميع العناصر التي تم ربطها معا بشكل معين ففي المثال التالي سوف يتم اضافة shadow color الي عناصر الادخال checked input
input:default {
box-shadow: 0 0 1px 1px red;
}
empty :
يقوم هذا النوع باختيار جميع العناصر الفارغة ففي المثال التالي يتم اختيار جميع العناصر الفارغة من النوع <p>
p:empty {
background: #ff0000;
}
enabled :
في هذا المثال سوف يتم اختيار جميع العناصر من النوع <inputs > التي تكون مفعلة ففي المثال التالي سوف يتم اختيار جميع العناصر من النوع <input> المفعلة
input[type="text"]:enabled {
background: #ffff00;
}
first-child
هذا النوع يقوم باختيار اول عنصر موجود داخل عنصر اخر ففي المثال التالي سوف يتم اختيار اول عنصر من النوع <p> موجود داخل عناصر اخري
p:first-child {
background-color: yellow;
}
first-letter
يقوم هذا العنصر باختيار اول حرف من عنصر معين لاجراء تغييرات معينة عليه
p::first-letter {
font-size: 200%;
color: #8A2BE2;
}
first-line
يقوم هذا العنصر باختيار اول سطر من عنصر معين لاجراء تغييرات معينه علي
p::first-line {
background-color: yellow;
}
first-of-type
يقوم هذا العنصر باختيار اول عنصر موجود داخل عنصر اخر معين ويتم تحديد كلاهم لاجراء التغييرات عليه
p:first-of-type {
background: red;
}
focus
يقوم هذا المؤشر بتحديد العنصر الذي يقف علي المؤشر لاجراء تعديلات معينة عليه
input:focus {
background-color: yellow;
}
full :
يقوم هذا العنصر بتحديد العناصر التي تكون في وضع full screen لاجراء تعديلات عليها
:fullscreen {
background-color: yellow;
}
in-range :
قوم هذا العنصر باختيار عنصر تم انتقال المؤشر منه ليتم اجراء تغييرات عليه بعد اجراء هذه العملية
input:in-range {
border: 2px solid yellow;
}
indeterminate
يقوم هذا العنصر باختيار العناصر من النوع (chexbox , radio , progress ) اذا كان لم يتم اختيارها بعد لعمل بعض التغييرات عليها
input:indeterminate {
box-shadow: 0 0 1px 1px red;
}
invalid
يقوم باختيار عنصر من النوع input لجراء بعد التغييرات في حالة ما اذا كانت القيمة التي بداخله غير صحيحة
input:invalid {
border: 2px solid red;
}
lang
يقوم هذا العنصر بتحديد جميع العناصر التي علي Lang attribute به قيمة معينة
p:lang(it) {
background: yellow;
}
last-child
يقوم هذا العنصر باختيار اخر عنصر من نوع معين تقوم بتحديده ليتم اجراء تغييرات عليه
p:last-child {
background: #ff0000;
}
last-of-type
يقوم هذا العنصر باختيار اخر عنصر من نوع معين لاجراء تغييرات معينه عليه
p:last-of-type {
background: #ff0000;
}
::marker
يقوم هذا النوع بتحديد العلامات الموجودة لأجراء تغييرات عليها
::marker {
color: red;
}
( )Not
يقوم هذا العنصر باختيار كل العناصر التي نوعها يختلف عن نوع معين تقوم بتحديده لأجراء تعديلات عليها
:not(p) {
color: blue;
}
( )nth-child
يقوم هذا العنصر باختيار كل ثاني عنصر موجود داخل عنصر اخر
p:nth-child(2) {
background: red;
}
( )nth-last-child
يقوم هذا العنصر باختيار العنصر الذي يسبق اخر عنصر موجود داخل عنصر اخر يحتوي علي عدة عناصر
p:nth-last-child(2) {
background: red;
}
p:only-of-type
يقوم بختيار العنصر الذي هو من النوع child وال parent الخاص به لا يحتوي علي عناصر اخري غيره
p:only-of-type {
background: red;
}
:optional
يقوم: المحدد الاختياري بتحديد عناصر النموذج الاختيارية. يتم تحديد عناصر النموذج التي لا تحتوي على سمة مطلوبة على أنها اختيارية.
input:optional {
background-color: yellow;
}
out of rang
تحديد عناصر الإدخال بقيمة خارج نطاق محدد
input:out-of-range {
border: 2px solid red;
}
read only
يقوم بتحديد العناصر التي هي من النوع "readonly" لاجراء بعد التغييرات عليها
input:read-only {
background-color: yellow;
}
read-write
يقوم هذا النوع باختيار العناصر التي هي من النوع "read" و "write" لاجراء بعض التغييرات عليها
input:read-write {
background-color: yellow;
}
required
يقوم هذا العنصر بتحديد عناصر الادخال التي هي من النوع "required"
input:required {
background-color: yellow;
}
Root
يقوم هذا العنصر بتحديد نموذج ال HTML الاساسي لاجراء بعض التغييرات عليه
:root {
background: #ff0000;
}
selection
يقوم هذا العنصر بتحديد العنصر الذي تقوم بتحديده بالمؤشر لاجراء بعد التغييرات عليها
::selection {
color: red;
background: yellow;
}
target
يقوم هذا العنصر باختيار العنصر الذي تقوم بتحديده عن طريق المؤشر الخاص بك
:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
valid
يقوم بعمل تحديد لعناصر الادخال التي تكون القيمة المدخلة بداخلها من قبل المستخدم هيا قيمة صحيحة
input:valid {
background-color: yellow;
}
</> Attribute selectors
attribute
يقوم هذا النوع بعمل اختيار لجميع العناصر التي تحتوي علي attribute ففي المثال التالي سوف يتم اختيار جميع العناصر التي تحتوي علي attribute معين
a[target] {
background-color: yellow;
}
attribute = value
هذا النوع يقوم باختيار جميع العناصر التي تحتوي attribute بقيمة معينة ففي المثال التالي سوف يتم اختيار جميع العناصر تحتوي علي attribute يساوي "blank_"
a[target=_blank] {
background-color: yellow;
}
attribute~=value
يقوم هذا النوع من ال selectors باختيار العناصر التي تحتوي علي كلمة معينة يتم تحديدها ففي المثال التالي يتم اختيار جميع العناصر التي تحتوي علي كلمة "flower"
[title~=flower] {
background-color: yellow;
}
attribue|= valeue
في هذا النوع من ال selectors يتم اختيار جميع العناصر تحتوي علي قيمة معينة في عنصر Lang attribute ففي المثال التالي سوف يتم اختيار جميع العناصر التي تحتوي علي "ar " في قيمة Lang attribute الخاصة بها
[lang|=en] {
background-color: yellow;
}
attribute^=value
في هذا النوع يتم اختيار جميع العناصر التي تحتوي علي كلمة معينة داخل attribute value الخاص بها ففي المثال التالي سوف يتم اختيار جميع العناصر التي تبدا قيمة ال attribute value الخاصة بها بكلمة "test"
div[class^="test"] {
background: #ffff00;
}
attribute$=value
في هذا المثال يتم اختيار جميع العناصر التي تنتهي ال attribute value الخاصة بها بكلمة معينة ففي المثال التالي سوف يتم اختيار جميع العناصر التي تنتهي attribute value الخاصة بها بكلمة "test"
div[class$="test"] {
background: #ffff00;
}
attribute*=value
يقوم هذا النوع باختيار جميع العناصر التي تحتوي علي كلمة معينة بداخل attribute value الخاصة بها ففي المثال التالي سوف يتم اختيار جميع العناصر التي تحتوي بداخل قيمة attribute value الخاصة بها علي كلمة معينة في أي مكان بداخلها
div[class*="test"] {
background: #ffff00;
}
</> test
element.class
تقوم بعمل select لجميع العناصر من نوع معين وتحتوي علي class معين
p.intro {
background-color: yellow;
}
</>
CSS descendant selector
العناصر من أب أو من نسل واحد في لغة CSS
لاختيار جميع العناصر الموجودة بداخل عنصر معين في لغة CSS يجب كتابة اسم العنصر parent الأب في البداية متبوعاً باسم child الأبن ونفصل بينهم بمسافة واحدة.
CSS descendant selector
العناصر من أب أو من نسل واحد في لغة CSS.
div p
{
background-color: #007bff;
color:white;
}
</> Attribute selectors
attribute
يقوم هذا النوع بعمل اختيار لجميع العناصر التي تحتوي علي attribute ففي المثال التالي سوف يتم اختيار جميع العناصر التي تحتوي علي attribute معين
a[target] {
background-color: yellow;
}
attribute = value
هذا النوع يقوم باختيار جميع العناصر التي تحتوي attribute بقيمة معينة ففي المثال التالي سوف يتم اختيار جميع العناصر تحتوي علي attribute يساوي "blank_"
a[target=_blank] {
background-color: yellow;
}
attribute~=value
يقوم هذا النوع من ال selectors باختيار العناصر التي تحتوي علي كلمة معينة يتم تحديدها ففي المثال التالي يتم اختيار جميع العناصر التي تحتوي علي كلمة "flower"
[title~=flower] {
background-color: yellow;
}
attribue|= valeue
في هذا النوع من ال selectors يتم اختيار جميع العناصر تحتوي علي قيمة معينة في عنصر Lang attribute ففي المثال التالي سوف يتم اختيار جميع العناصر التي تحتوي علي "ar " في قيمة Lang attribute الخاصة بها
[lang|=en] {
background-color: yellow;
}
attribute^=value
في هذا النوع يتم اختيار جميع العناصر التي تحتوي علي كلمة معينة داخل attribute value الخاص بها ففي المثال التالي سوف يتم اختيار جميع العناصر التي تبدا قيمة ال attribute value الخاصة بها بكلمة "test"
div[class^="test"] {
background: #ffff00;
}
attribute$=value
في هذا المثال يتم اختيار جميع العناصر التي تنتهي ال attribute value الخاصة بها بكلمة معينة ففي المثال التالي سوف يتم اختيار جميع العناصر التي تنتهي attribute value الخاصة بها بكلمة "test"
div[class$="test"] {
background: #ffff00;
}
attribute*=value
يقوم هذا النوع باختيار جميع العناصر التي تحتوي علي كلمة معينة بداخل attribute value الخاصة بها ففي المثال التالي سوف يتم اختيار جميع العناصر التي تحتوي بداخل قيمة attribute value الخاصة بها علي كلمة معينة في أي مكان بداخلها
div[class*="test"] {
background: #ffff00;
}
</>
CSS child selector
تحديد العناصر الداخلية أو الأبناء في لغة CSS
لتحديد العناصر children الأبناء أو الداخلية لعنصر ما parent من نوع معين مثل جميع <p> أو جميع <span> في لغة CSS فيجب كتابة اسم العنصر parent الأب متبوعاً بعلامة أكبر من > ثم اسم عنصر الأبن ليصبح بهذا الشكل [div > p].
CSS child selector
اختيار العناصر الأبناء او الداخلية في لغة CSS.
div > p
{
background-color: #007bff;
}
</> test
element.class
تقوم بعمل select لجميع العناصر من نوع معين وتحتوي علي class معين
p.intro {
background-color: yellow;
}
</>
CSS adjacent sibling selector
تحديد العنصر الأخ المجاور في لغة CSS
لتحديد العنصر الأخ المجاور مباشرة في لغة CSS فيجب تحديد العنصر الأساسي متبوعاً بعلامة plus + ثم العنصر التالي مباشرة ولتحديد paragraph يلي div فنكتب بهذا الشكل [div + p].
CSS adjacent sibling selector
تحديد العناصر الأخوة المجاورة في لغة CSS.
div + p
{
background-color: #007bff;
}
</> Another Selectors
active :
في هذا المثال سوف يتم اختيار جميع العناصر التي تم تنشيطها من نوع معين ففي هذا المثال سوف يتم اختيار جميع العناصر من نوع <a> التي تم تنشيطها
a:active {
background-color: yellow;
}
after ::
في هذا النوع يتم إضافة قيمة معينة بعد المحتوي الموجود بداخل كل عنصر من نوع معين ففي المثال التالي سوف يتم إضافة نص معين بعد المحتوي الموجود بداخل كل عنصر من النوع <p>
p::after {
content: " - Remember this";
}
before ::
في هذا النوع يتم إضافة قيمة معينة قبل المحتوي الموجود بداخل كل عنصر من نوع معين ففي المثال التالي سوف يتم إضافة نص معين قبل المحتوي الموجود بداخل كل عنصر من النوع <p>
p::before {
content: "Read this: ";
}
checked :
يقوم هذا النوع باختيار جميع العناصر التي يتم النقر عليها مثل (radio buttons و chekboxes ) ففي المثال التالي سوف يتم تعيين العرض width والارتفاع height الخاص بكل العناصر من النوع <input>
input:checked {
height: 50px;
width: 50px;
}
default :
في هذا النوع يتم اختيار جميع العناصر التي تم ربطها معا بشكل معين ففي المثال التالي سوف يتم اضافة shadow color الي عناصر الادخال checked input
input:default {
box-shadow: 0 0 1px 1px red;
}
empty :
يقوم هذا النوع باختيار جميع العناصر الفارغة ففي المثال التالي يتم اختيار جميع العناصر الفارغة من النوع <p>
p:empty {
background: #ff0000;
}
enabled :
في هذا المثال سوف يتم اختيار جميع العناصر من النوع <inputs > التي تكون مفعلة ففي المثال التالي سوف يتم اختيار جميع العناصر من النوع <input> المفعلة
input[type="text"]:enabled {
background: #ffff00;
}
first-child
هذا النوع يقوم باختيار اول عنصر موجود داخل عنصر اخر ففي المثال التالي سوف يتم اختيار اول عنصر من النوع <p> موجود داخل عناصر اخري
p:first-child {
background-color: yellow;
}
first-letter
يقوم هذا العنصر باختيار اول حرف من عنصر معين لاجراء تغييرات معينة عليه
p::first-letter {
font-size: 200%;
color: #8A2BE2;
}
first-line
يقوم هذا العنصر باختيار اول سطر من عنصر معين لاجراء تغييرات معينه علي
p::first-line {
background-color: yellow;
}
first-of-type
يقوم هذا العنصر باختيار اول عنصر موجود داخل عنصر اخر معين ويتم تحديد كلاهم لاجراء التغييرات عليه
p:first-of-type {
background: red;
}
focus
يقوم هذا المؤشر بتحديد العنصر الذي يقف علي المؤشر لاجراء تعديلات معينة عليه
input:focus {
background-color: yellow;
}
full :
يقوم هذا العنصر بتحديد العناصر التي تكون في وضع full screen لاجراء تعديلات عليها
:fullscreen {
background-color: yellow;
}
hover
يقوم هذا العنصر بتحديد العنصر الذي يقف عليه المؤشر لاجراء تغييرات عليه
a:hover {
background-color: yellow;
}
in-range :
قوم هذا العنصر باختيار عنصر تم انتقال المؤشر منه ليتم اجراء تغييرات عليه بعد اجراء هذه العملية
input:in-range {
border: 2px solid yellow;
}
indeterminate
يقوم هذا العنصر باختيار العناصر من النوع (chexbox , radio , progress ) اذا كان لم يتم اختيارها بعد لعمل بعض التغييرات عليها
input:indeterminate {
box-shadow: 0 0 1px 1px red;
}
invalid
يقوم باختيار عنصر من النوع input لجراء بعد التغييرات في حالة ما اذا كانت القيمة التي بداخله غير صحيحة
input:invalid {
border: 2px solid red;
}
lang
يقوم هذا العنصر بتحديد جميع العناصر التي علي Lang attribute به قيمة معينة
p:lang(it) {
background: yellow;
}
last-child
يقوم هذا العنصر باختيار اخر عنصر من نوع معين تقوم بتحديده ليتم اجراء تغييرات عليه
p:last-child {
background: #ff0000;
}
last-of-type
يقوم هذا العنصر باختيار اخر عنصر من نوع معين لاجراء تغييرات معينه عليه
p:last-of-type {
background: #ff0000;
}
link
يقوم هذا المتغير بتحديد العناصر من النوع link التي لم يتم الضغط عليها بعد
a:link {
background-color: red;
}
::marker
يقوم هذا النوع بتحديد العلامات الموجودة لأجراء تغييرات عليها
::marker {
color: red;
}
( )Not
يقوم هذا العنصر باختيار كل العناصر التي نوعها يختلف عن نوع معين تقوم بتحديده لأجراء تعديلات عليها
:not(p) {
color: blue;
}
( )nth-child
يقوم هذا العنصر باختيار كل ثاني عنصر موجود داخل عنصر اخر
p:nth-child(2) {
background: red;
}
( )nth-last-child
يقوم هذا العنصر باختيار العنصر الذي يسبق اخر عنصر موجود داخل عنصر اخر يحتوي علي عدة عناصر
p:nth-last-child(2) {
background: red;
}
p:only-of-type
يقوم بختيار العنصر الذي هو من النوع child وال parent الخاص به لا يحتوي علي عناصر اخري غيره
p:only-of-type {
background: red;
}
:optional
يقوم: المحدد الاختياري بتحديد عناصر النموذج الاختيارية. يتم تحديد عناصر النموذج التي لا تحتوي على سمة مطلوبة على أنها اختيارية.
input:optional {
background-color: yellow;
}
out of rang
تحديد عناصر الإدخال بقيمة خارج نطاق محدد
input:out-of-range {
border: 2px solid red;
}
read only
يقوم بتحديد العناصر التي هي من النوع "readonly" لاجراء بعد التغييرات عليها
input:read-only {
background-color: yellow;
}
read-write
يقوم هذا النوع باختيار العناصر التي هي من النوع "read" و "write" لاجراء بعض التغييرات عليها
input:read-write {
background-color: yellow;
}
required
يقوم هذا العنصر بتحديد عناصر الادخال التي هي من النوع "required"
input:required {
background-color: yellow;
}
Root
يقوم هذا العنصر بتحديد نموذج ال HTML الاساسي لاجراء بعض التغييرات عليه
:root {
background: #ff0000;
}
selection
يقوم هذا العنصر بتحديد العنصر الذي تقوم بتحديده بالمؤشر لاجراء بعد التغييرات عليها
::selection {
color: red;
background: yellow;
}
target
يقوم هذا العنصر باختيار العنصر الذي تقوم بتحديده عن طريق المؤشر الخاص بك
:target {
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
valid
يقوم بعمل تحديد لعناصر الادخال التي تكون القيمة المدخلة بداخلها من قبل المستخدم هيا قيمة صحيحة
input:valid {
background-color: yellow;
}
Selector
يقوم باختيار العناصر من النوع Link التي قد قمت بالضغط عليها بالفعل
a:visited {
color: pink;
}
</>
CSS general sibling selector
تحديد جميع العناصر الأخوة المجاورة في لغة CSS
لتحديد جميع العناصر الأخوة المجاورة في لغة CSS بعد عنصر معين فنكتب أسم العنصر الذي يتبعه عنصر اخ مباشر متبوعاً باسم العنصر المجاور مثل [p ~ ul] لتحديد جميع ul فقط التي تلي أو بجوار عنصر p.
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
