Προηγμένη επιλογή στοιχείων στο 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. Μπορείτε να προσαρμόσετε και να εφαρμόσετε αυτές τις τεχνικές για να διαμορφώσετε και να προσαρμόσετε στοιχεία στην ιστοσελίδα σας όπως επιθυμείτε.