CSS

CSS Pseudo Classes
تحديد العناصر عن طريق الحالة في لغة CSS

سوف تتعلم في هذا الدرس كيفه اختيار العناصر علي حسب حالة معينة لإضافة style عليها في لغة CSS وتسمي هذه الطريقة Pseudo Classes.

التاريخ

07 نوفمبر 2022

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

923

المواضيع

24
الشروحات chevron_left CSS Pseudo Classes chevron_left CSS
CSS Flex Box keyboard_arrow_down

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.

CSS general sibling selector
p ~ ul
{
  background: #ff0000;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.