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 இல் மேம்பட்ட உறுப்புத் தேர்வை நிரூபிக்கின்றன. உங்கள் வலைப்பக்கத்தில் உள்ள கூறுகளை விருப்பப்படி பாணி மற்றும் தனிப்பயனாக்க இந்த நுட்பங்களை நீங்கள் தனிப்பயனாக்கலாம் மற்றும் பயன்படுத்தலாம்.