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

</> 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;
}

</> test

element.class

تقوم بعمل select لجميع العناصر من نوع معين وتحتوي علي class معين

p.intro {
  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;
}

</> 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;
}