اختيار العناصر المتقدمة في CSS- تقنيات وأمثلة

الفئات الزائفة

تسمح لك الفئات الزائفة بتحديد حالات أو مواضع معينة لعنصر ما. على سبيل المثال ، :hover يحدد العنصر عندما يكون مؤشر الماوس فوقه ، :focus ويحدد العنصر عند تحديده أو التركيز عليه ، :nth-child() ويحدد عنصرًا فرعيًا معينًا في مجموعة.

أمثلة:

/* Select all links when hovered over and change the text color */  
a:hover {  
  color: red;  
}  
  
/* Select the <input> element when it is focused and change the border */  
input:focus {  
  border: 2px solid blue;  
}  
  
/* Select the second element in a group of <li> elements and change the text color */  
li:nth-child(2) {  
  color: green;  
}  

 

العناصر الزائفة

تسمح لك العناصر الزائفة بإنشاء عناصر افتراضية لتخصيص عنصر موجود.

على سبيل المثال ، ::before قم ::after بإنشاء عناصر قبل عنصر ما وبعده ، ::first-line وحدد ::first-letter السطر الأول والحرف الأول من العنصر.

أمثلة:

/* Add content before each <p> element and style it */  
p::before {  
  content: ">> ";  
  font-weight: bold;  
  color: gray;  
}  
  
/* Style the first letter of <h1> element */  
h1::first-letter {  
  font-size: 2em;  
  font-weight: bold;  
  color: red;  
}  

 

موحد

تسمح لك المجمعات بدمج المحددات لتحديد العناصر بناءً على علاقتها. على سبيل المثال ، element1 element2 يختار element2 الداخل element1 ، element1 > element2 ويحدد العناصر الفرعية المباشرة لـ element1 ، element1 + element2 ويحدد element2 بعد ذلك مباشرة element1.

أمثلة:

/* Select <span> elements inside an element with class "container" */  
.container span {  
  color: purple;  
}  
  
/* Select <li> elements that are direct children of <ul> */  
ul > li {  
  list-style-type: square;  
  color: blue;  
}  

 

محددات السمات

تسمح لك محددات السمات بتحديد العناصر بناءً على قيمة سماتها. على سبيل المثال ، [attribute] يختار العناصر ذات السمة attribute ، [attribute=value] ويحدد العناصر التي attribute تساوي السمة value ، ويحدد العناصر التي تبدأ [attribute^=value] السمة بـ. attribute value

أمثلة:

/* Select all elements with the attribute data-type */  
[data-type] {  
  font-weight: bold;  
  color: orange;  
}  
  
/* Select all <a> elements with the href attribute starting with "https://" */  
a[href^="https://"] {  
  color: blue;  
  text-decoration: underline;  
}  

 

:not() محدد

يسمح لك المحدد بتحديد العناصر التي لا تطابق محددًا معينًا. على سبيل المثال ، يختار العناصر التي لا تحتوي على الفئة ، ويحدد العناصر التي لا تحتوي على المعرف. :not() :not(.class) class :not(#id) id

أمثلة:

/* Select all <div> elements that do not have the class "hidden" */  
div:not(.hidden) {  
  display: block;  
  background-color: lightgray;  
}  
  
/* Select all <input> elements that do not have the ID "email-input" */  
input:not(#email-input) {  
  border: 1px solid gray;  
}  

 

توضح هذه الأمثلة الاختيار المتقدم للعناصر في CSS. يمكنك تخصيص هذه الأساليب وتطبيقها على نمط العناصر وتخصيصها على صفحة الويب الخاصة بك حسب الرغبة.