Another Selectors

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

active :

في هذا المثال سوف يتم اختيار جميع العناصر التي تم تنشيطها من نوع معين ففي هذا المثال سوف يتم اختيار جميع العناصر من نوع <a> التي تم تنشيطها

HTML

a:active {
  background-color: yellow;
}

جرّب بنفسك

after ::

في هذا النوع يتم إضافة قيمة معينة بعد المحتوي الموجود بداخل كل عنصر من نوع معين ففي المثال التالي سوف يتم إضافة نص معين بعد المحتوي الموجود بداخل كل عنصر من النوع <p>

HTML

p::after {
  content: " - Remember this";
}

جرّب بنفسك

before ::

في هذا النوع يتم إضافة قيمة معينة قبل المحتوي الموجود بداخل كل عنصر من نوع معين ففي المثال التالي سوف يتم إضافة نص معين قبل المحتوي الموجود بداخل كل عنصر من النوع <p>

HTML

p::before {
  content: "Read this: ";
}

جرّب بنفسك

checked :

يقوم هذا النوع باختيار جميع العناصر التي يتم النقر عليها مثل (radio buttons و chekboxes ) ففي المثال التالي سوف يتم تعيين العرض width والارتفاع height الخاص بكل العناصر من النوع <input>

HTML

input:checked {
  height: 50px;
  width: 50px;
}

جرّب بنفسك

default :

في هذا النوع يتم اختيار جميع العناصر التي تم ربطها معا بشكل معين ففي المثال التالي سوف يتم اضافة shadow color الي عناصر الادخال checked input

HTML

input:default {
  box-shadow: 0 0 1px 1px red;
}

جرّب بنفسك

empty :

يقوم هذا النوع باختيار جميع العناصر الفارغة ففي المثال التالي يتم اختيار جميع العناصر الفارغة من النوع <p>

HTML

p:empty {
  background: #ff0000;
}

جرّب بنفسك

enabled :

في هذا المثال سوف يتم اختيار جميع العناصر من النوع <inputs > التي تكون مفعلة ففي المثال التالي سوف يتم اختيار جميع العناصر من النوع <input> المفعلة

HTML

input[type="text"]:enabled {
  background: #ffff00;
}

جرّب بنفسك

first-child

هذا النوع يقوم باختيار اول عنصر موجود داخل عنصر اخر ففي المثال التالي سوف يتم اختيار اول عنصر من النوع <p> موجود داخل عناصر اخري

HTML

p:first-child {
  background-color: yellow;
}

جرّب بنفسك

first-letter

يقوم هذا العنصر باختيار اول حرف من عنصر معين لاجراء تغييرات معينة عليه

HTML

p::first-letter {
  font-size: 200%;
  color: #8A2BE2;
}

جرّب بنفسك

first-line

يقوم هذا العنصر باختيار اول سطر من عنصر معين لاجراء تغييرات معينه علي

HTML

p::first-line {
  background-color: yellow;
}

جرّب بنفسك

first-of-type

يقوم هذا العنصر باختيار اول عنصر موجود داخل عنصر اخر معين ويتم تحديد كلاهم لاجراء التغييرات عليه

HTML

p:first-of-type {
  background: red;
}

جرّب بنفسك

focus

يقوم هذا المؤشر بتحديد العنصر الذي يقف علي المؤشر لاجراء تعديلات معينة عليه

HTML

input:focus {
  background-color: yellow;
}

جرّب بنفسك

الصف 2 شرح توضيحي

full :

يقوم هذا العنصر بتحديد العناصر التي تكون في وضع full screen لاجراء تعديلات عليها

HTML

:fullscreen {
  background-color: yellow;
}

جرّب بنفسك

hover

يقوم هذا العنصر بتحديد العنصر الذي يقف عليه المؤشر لاجراء تغييرات عليه

HTML

a:hover {
  background-color: yellow;
}

جرّب بنفسك

in-range :

قوم هذا العنصر باختيار عنصر تم انتقال المؤشر منه ليتم اجراء تغييرات عليه بعد اجراء هذه العملية

HTML

input:in-range {
  border: 2px solid yellow;
}

جرّب بنفسك

indeterminate

يقوم هذا العنصر باختيار العناصر من النوع (chexbox , radio , progress ) اذا كان لم يتم اختيارها بعد لعمل بعض التغييرات عليها

HTML

input:indeterminate {
  box-shadow: 0 0 1px 1px red;
}

جرّب بنفسك

invalid

يقوم باختيار عنصر من النوع input لجراء بعد التغييرات في حالة ما اذا كانت القيمة التي بداخله غير صحيحة

HTML

input:invalid {
  border: 2px solid red;
}

جرّب بنفسك

lang

يقوم هذا العنصر بتحديد جميع العناصر التي علي Lang attribute به قيمة معينة

HTML

p:lang(it) {
  background: yellow;
}

جرّب بنفسك

last-child

يقوم هذا العنصر باختيار اخر عنصر من نوع معين تقوم بتحديده ليتم اجراء تغييرات عليه

HTML

p:last-child {
  background: #ff0000;
}

جرّب بنفسك

last-of-type

يقوم هذا العنصر باختيار اخر عنصر من نوع معين لاجراء تغييرات معينه عليه

HTML

p:last-of-type {
  background: #ff0000;
}

جرّب بنفسك

link

يقوم هذا المتغير بتحديد العناصر من النوع link التي لم يتم الضغط عليها بعد

HTML

a:link {
  background-color: red;
}

جرّب بنفسك

::marker

يقوم هذا النوع بتحديد العلامات الموجودة لأجراء تغييرات عليها

HTML

::marker {
  color: red;
}

جرّب بنفسك

( )Not

يقوم هذا العنصر باختيار كل العناصر التي نوعها يختلف عن نوع معين تقوم بتحديده لأجراء تعديلات عليها

HTML

:not(p) {
  color: blue;
}

جرّب بنفسك

( )nth-child

يقوم هذا العنصر باختيار كل ثاني عنصر موجود داخل عنصر اخر

HTML

p:nth-child(2) {
  background: red;
}

جرّب بنفسك

الصف 3 شرح توضيحي

( )nth-last-child

يقوم هذا العنصر باختيار العنصر الذي يسبق اخر عنصر موجود داخل عنصر اخر يحتوي علي عدة عناصر

HTML

p:nth-last-child(2) {
  background: red;
}

جرّب بنفسك

p:only-of-type

يقوم بختيار العنصر الذي هو من النوع child وال parent الخاص به لا يحتوي علي عناصر اخري غيره

HTML

p:only-of-type {
  background: red;
}

جرّب بنفسك

:optional

يقوم: المحدد الاختياري بتحديد عناصر النموذج الاختيارية. يتم تحديد عناصر النموذج التي لا تحتوي على سمة مطلوبة على أنها اختيارية.

HTML

input:optional {
  background-color: yellow;
}

جرّب بنفسك

out of rang

تحديد عناصر الإدخال بقيمة خارج نطاق محدد

HTML

input:out-of-range {
  border: 2px solid red;
}

جرّب بنفسك

read only

يقوم بتحديد العناصر التي هي من النوع "readonly" لاجراء بعد التغييرات عليها

HTML

input:read-only {
  background-color: yellow;
}

جرّب بنفسك

read-write

يقوم هذا النوع باختيار العناصر التي هي من النوع "read" و "write" لاجراء بعض التغييرات عليها

HTML

input:read-write {
  background-color: yellow;
}

جرّب بنفسك

required

يقوم هذا العنصر بتحديد عناصر الادخال التي هي من النوع "required"

HTML

input:required {
  background-color: yellow;
}

جرّب بنفسك

Root

يقوم هذا العنصر بتحديد نموذج ال HTML الاساسي لاجراء بعض التغييرات عليه

HTML

:root {
  background: #ff0000;
}

جرّب بنفسك

selection

يقوم هذا العنصر بتحديد العنصر الذي تقوم بتحديده بالمؤشر لاجراء بعد التغييرات عليها

HTML

::selection {
  color: red;
  background: yellow;
}

جرّب بنفسك

target

يقوم هذا العنصر باختيار العنصر الذي تقوم بتحديده عن طريق المؤشر الخاص بك

HTML

:target {
  border: 2px solid #D4D4D4;
  background-color: #e5eecc;
}

جرّب بنفسك

valid

يقوم بعمل تحديد لعناصر الادخال التي تكون القيمة المدخلة بداخلها من قبل المستخدم هيا قيمة صحيحة

HTML

input:valid {
  background-color: yellow;
}

جرّب بنفسك

Selector

يقوم باختيار العناصر من النوع Link التي قد قمت بالضغط عليها بالفعل

HTML

a:visited {
  color: pink;
}

جرّب بنفسك

شرح صفوف ومحتوى الفقرة

active :

after ::

before ::

checked :

default :

empty :

enabled :

first-child

first-letter

first-line

first-of-type

focus

full :

hover

in-range :

indeterminate

invalid

lang

last-child

last-of-type

link

::marker

( )Not

( )nth-child

( )nth-last-child

p:only-of-type

:optional

out of rang

read only

read-write

required

Root

selection

target

valid

Selector

جميع فقرات هذا الدرس (تحديد العناصر عن طريق الحالة في لغة CSS)