سی ایس ایس میں عنصر کا اعلیٰ انتخاب- تکنیکیں اور مثالیں۔

سیوڈو کلاسز

سیوڈو کلاسز آپ کو کسی عنصر کی مخصوص حالتوں یا پوزیشنوں کو منتخب کرنے کی اجازت دیتی ہیں۔ مثال کے طور پر، :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;  
}  

 

کمبینیٹرز

Combinators آپ کو سلیکٹرز کو ان کے تعلق کی بنیاد پر عناصر کو منتخب کرنے کے لیے یکجا کرنے کی اجازت دیتا ہے۔ مثال کے طور پر، اندر 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() سلیکٹر

سلیکٹر آپ کو ایسے عناصر کو منتخب کرنے کی اجازت دیتا ہے جو کسی مخصوص سلیکٹر سے میل نہیں کھاتے ہیں۔ مثال کے طور پر، ایسے عناصر کو منتخب کرتا ہے جن کے پاس کلاس نہیں ہے ، ایسے عناصر کو منتخب کرتا ہے جن کے پاس ID نہیں ہے ۔ :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 میں عنصر کے اعلیٰ انتخاب کو ظاہر کرتی ہیں۔ آپ اپنی مرضی کے مطابق ان تکنیکوں کو اپنی مرضی کے مطابق اپنے ویب پیج پر عناصر کو اسٹائل اور اپنی مرضی کے مطابق بنا سکتے ہیں۔