Είναι δυνατό να διαμορφώσετε στοιχεία HTML που έχουν συγκεκριμένα χαρακτηριστικά ή τιμές χαρακτηριστικών.
Ο επιλογέας [χαρακτηριστικό] χρησιμοποιείται για την επιλογή στοιχείων με καθορισμένο Χαρακτηριστικό.
Το ακόλουθο παράδειγμα επιλέγει όλα τα στοιχεία <a> με χαρακτηριστικό στόχο:
a[target] {
background-color: yellow;
} Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Ο επιλογέας [attribute="value"] χρησιμοποιείται για την επιλογή στοιχείων με καθορισμένο χαρακτηριστικό και τιμή.
Το ακόλουθο παράδειγμα επιλέγει όλα τα στοιχεία <a> με χαρακτηριστικό target="_blank":
a[target="_blank"] {
background-color: yellow;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
a[target="_blank"] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Ο επιλογέας [attribute~="value"] χρησιμοποιείται για την επιλογή στοιχείων με ένα χαρακτηριστικό τιμή που περιέχει μια καθορισμένη λέξη.
Το παρακάτω παράδειγμα επιλέγει όλα τα στοιχεία με χαρακτηριστικό τίτλο που περιέχει μια λίστα λέξεων διαχωρισμένων με κενό χώρο, μία από τις οποίες είναι "λουλούδι":
[title~="flower"] {
border: 5px solid yellow;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
[title~="flower"] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute~="value"] Selector</h2>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">
</body>
</html>
Το παραπάνω παράδειγμα θα αντιστοιχίσει στοιχεία με title="flower", title="summer λουλούδι", και title="flower new", αλλά όχι title="my-flower" ή title="λουλούδια".
Ο επιλογέας [attribute|="value"] χρησιμοποιείται για την επιλογή στοιχείων με το καθορισμένο χαρακτηριστικό, των οποίων η τιμή μπορεί να είναι ακριβώς την καθορισμένη τιμή ή την καθορισμένη τιμή ακολουθούμενη από παύλα (-).
Σημείωση: Η τιμή πρέπει να είναι μια ολόκληρη λέξη, είτε μόνη της, όπως class="top", ή ακολουθούμενο από παύλα( - ), όπως class="top-text".
[class|="top"] {
background: yellow;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
[class|="top"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute|="value"] Selector</h2>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
Ο επιλογέας [attribute^="value"] χρησιμοποιείται για την επιλογή στοιχείων με το καθορισμένο χαρακτηριστικό, των οποίων η τιμή ξεκινά με την καθορισμένη τιμή.
Το ακόλουθο παράδειγμα επιλέγει όλα τα στοιχεία με μια τιμή χαρακτηριστικού κλάσης που ξεκινά με "κορυφή":
Σημείωση: Η τιμή δεν χρειάζεται να είναι ολόκληρη λέξη!
[class^="top"] {
background: yellow;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute^="value"] Selector</h2>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
Ο επιλογέας [attribute$="value"] χρησιμοποιείται για την επιλογή στοιχείων των οποίων το χαρακτηριστικό η τιμή τελειώνει με μια καθορισμένη τιμή.
Το ακόλουθο παράδειγμα επιλέγει όλα τα στοιχεία με μια τιμή χαρακτηριστικού κλάσης που τελειώνει με "δοκιμή":
Σημείωση: Η τιμή δεν χρειάζεται να είναι ολόκληρη λέξη!
[class$="test"] {
background: yellow;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
[class$="test"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute$="value"] Selector</h2>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
Ο επιλογέας [attribute*="value"] χρησιμοποιείται για την επιλογή στοιχείων των οποίων το χαρακτηριστικό η τιμή περιέχει μια καθορισμένη τιμή.
Το ακόλουθο παράδειγμα επιλέγει όλα τα στοιχεία με μια τιμή χαρακτηριστικού κλάσης που περιέχει το "te":
Σημείωση: Η τιμή δεν χρειάζεται να είναι ολόκληρη λέξη!
[class*="te"] {
background: yellow;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute*="value"] Selector</h2>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
Οι επιλογείς χαρακτηριστικών μπορούν να είναι χρήσιμοι για τη διαμόρφωση μορφών χωρίς κλάση ή αναγνωριστικό:
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
</style>
</head>
<body>
<h2>Styling Forms</h2>
<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Peter" size="20">
Lastname:<input type="text" name="Name" value="Griffin" size="20">
<input type="button" value="Example Button">
</form>
</body>
</html>
Συμβουλή: Επισκεφτείτε τον οδηγό μας για τις φόρμες CSS για περισσότερα παραδείγματα σχετικά με τον τρόπο δημιουργίας στυλ φορμών με CSS.
Παράδειγμα
[target]
Παράδειγμα περιγραφής
Επιλέγει όλα τα στοιχεία με χαρακτηριστικό στόχο
Παράδειγμα
[target="_blank"]
Παράδειγμα περιγραφής
Επιλέγει όλα τα στοιχεία με target="_blank"
Παράδειγμα
[title~="flower"]
Παράδειγμα περιγραφής
Επιλέγει όλα τα στοιχεία με ένα χαρακτηριστικό τίτλος που περιέχει μια λίστα λέξεων διαχωρισμένων με κενό διάστημα, μία από τις οποίες είναι "λουλούδι"
Παράδειγμα
[lang|="en"]
Παράδειγμα περιγραφής
Επιλέγει όλα τα στοιχεία με τιμή χαρακτηριστικού lang που ξεκινά με "en"
Παράδειγμα
a[href^="https"]
Παράδειγμα περιγραφής
Επιλέγει όλα τα στοιχεία <a> με τιμή χαρακτηριστικού href που ξεκινά με "https"
Παράδειγμα
a[href$=".pdf"]
Παράδειγμα περιγραφής
Επιλέγει όλα τα στοιχεία <a> με τιμή χαρακτηριστικού href που τελειώνει σε ".pdf"
Παράδειγμα
a[href*="w3schools"]
Παράδειγμα περιγραφής
Επιλέγει όλα τα στοιχεία <a> με τιμή χαρακτηριστικού href που περιέχει την υποσυμβολοσειρά "w3schools"