انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: تحديد العناصر عن طريق الحالة في لغة CSS

CSS Link Selectors تحديد حالات الروابط في لغة CSS

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

3 صفوف تعليمية
لغة CSS
2,720 مشاهدة

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

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

CSS link selectors active

عند الضغط علي الرابط سوف يتم تغيير لون الخلفية ولون نص الرابط.

HTML 
a:active
{
  background-color: red;
  color:white;
}
جرّب بنفسك

CSS link selectors hover

عند تمرير مؤشر Mouse علي العنصر سوف يتغير لونه ولون الخلفية.

HTML 
a:hover
{
  background-color: red;
  color:white;
}
جرّب بنفسك

CSS link selectors visited

يتم تغيير لون الرابط إذا تمت زيارته إلي لون مختلف.

HTML 
a:visited 
{
  color: red;
}
جرّب بنفسك

CSS link selectors link

عن طريق حالة link يمكن إضافة style علي الرابط الذي لم يتم زيارته.

HTML 
a:link
{
  background-color: red;
  color:white;
}
جرّب بنفسك

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;
}
جرّب بنفسك
الصف 2 شرح توضيحي

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;
}
جرّب بنفسك

full :

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

HTML 
:fullscreen {
  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;
}
جرّب بنفسك

::marker

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

HTML 
::marker {
  color: red;
}
جرّب بنفسك

( )Not

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

HTML 
:not(p) {
  color: blue;
}
جرّب بنفسك
الصف 3 شرح توضيحي

( )nth-child

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

HTML 
p:nth-child(2) {
  background: red;
}
جرّب بنفسك

( )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;
}
جرّب بنفسك

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