Επιλογείς Αtributou CSS

Ρύθμιση στυλ για στοιχεία HTML με συγκεκριμένη ιδιότητα

Μπορούμε να ρυθμίσουμε το στυλ των στοιχείων HTML που έχουν συγκεκριμένη ιδιότητα ή τιμή ιδιότητας.

CSS [attribute] Επιλογέας

[attribute] Ο επιλογέας επιλέγει στοιχεία που έχουν συγκεκριμένη ιδιότητα.

Το παρακάτω παράδειγμα επιλέγει όλα τα στοιχεία <a> με την ιδιότητα target;

Παράδειγμα

a[target] {
  background-color: yellow;
}

Δοκιμάστε το προσωπικά

CSS [attribute="value"] Επιλογέας

[attribute="value"] Ο επιλογέας επιλέγει στοιχεία που έχουν ιδιότητα με συγκεκριμένη τιμή.

Το παρακάτω παράδειγμα επιλέγει όλα τα στοιχεία <a> με την ιδιότητα target="_blank":

Παράδειγμα

a[target="_blank"] { 
  background-color: yellow;
}

Δοκιμάστε το προσωπικά

CSS [attribute~="value"] Επιλογέας

[attribute~="value"] Ο επιλογέας επιλέγει στοιχεία που έχουν ιδιότητα με τιμή που περιέχει τη συγκεκριμένη λέξη.

Το παρακάτω παράδειγμα επιλέγει όλα τα στοιχεία με την ιδιότητα title που περιέχει τη λέξη "flower":

Παράδειγμα

[title~="flower"] {
  border: 5px solid yellow;
}

Δοκιμάστε το προσωπικά

Οι παραπάνω παραδείγματα θα ταιριάζουν με τα στοιχεία με τις παρακάτω ιδιότητες: title="flower", title="summer flower" και title="flower new", αλλά δεν θα ταιριάζουν με: title="my-flower" ή title="flowers".

CSS [attribute|="value"] Επιλογέας

[attribute|="value"] Ο επιλογέας επιλέγει στοιχεία που έχουν ιδιότητα με τιμή που ξεκινά με αυτήν.

Στο παρακάτω παράδειγμα επιλέγονται όλα τα στοιχεία που ξεκινούν με την κλάση "top":

Σχόλια:Η τιμή πρέπει να είναι πλήρης ή ανεξάρτητη λέξη, όπως class="top" ή ακολουθούμενη από τριγωνικό τυλίγμα, όπως class="top-text".

Παράδειγμα

[class|="top"] {
  background: yellow;
}

Δοκιμάστε το προσωπικά

CSS [attribute^="value"] επιλογέας

Ο επιλογέας [attribute^="value"] χρησιμοποιείται για να επιλέξει τα στοιχεία που ξεκινούν με την καθορισμένη τιμή του χαρακτηριστικού.

Στο παρακάτω παράδειγμα επιλέγονται όλα τα στοιχεία που ξεκινούν με την κλάση "top":

Συμβουλή:Η τιμή δεν χρειάζεται να είναι ολόκληρη λέξη!

Παράδειγμα

[class^="top"] {
  background: yellow;
}

Δοκιμάστε το προσωπικά

CSS [attribute$="value"] επιλογέας

Ο επιλογέας [attribute$="value"] χρησιμοποιείται για να επιλέξει τα στοιχεία που ολοκληρώνονται με την καθορισμένη τιμή του χαρακτηριστικού.

Στο παρακάτω παράδειγμα επιλέγονται όλα τα στοιχεία που ολοκληρώνονται με την κλάση "test":

Συμβουλή:Η τιμή δεν χρειάζεται να είναι ολόκληρη λέξη!

Παράδειγμα

[class$="test"] {
  background: yellow;
}

Δοκιμάστε το προσωπικά

CSS [attribute*="value"] επιλογέας

[attribute*="value"] ο επιλογέας επιλέγει τα στοιχεία που περιέχουν την καθορισμένη λέξη στην τιμή του χαρακτηριστικού.

Στο παρακάτω παράδειγμα επιλέγονται όλα τα στοιχεία που περιέχουν την κλάση "te":

Συμβουλή:Η τιμή δεν χρειάζεται να είναι ολόκληρη λέξη!

Παράδειγμα

[class*="te"] {
  background: yellow;
}

Δοκιμάστε το προσωπικά

Ρύθμιση στυλ φόρμας

Αν χρειάζεστε να ρυθμίσετε τα στυλ μιας φόρμας χωρίς class ή id, οι επιλογείς επιλογής είναι πολύ χρήσιμοι:

Παράδειγμα

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}
input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Δοκιμάστε το προσωπικά

Συμβουλή:Επισκεφθείτε το Εκμάθηση CSS ΦόρμαςΓια περισσότερες πληροφορίες σχετικά με το πώς να χρησιμοποιήσετε το CSS για να ρυθμίσετε τα στυλ των φόρμας.

Όλα τα CSS επιλογικά αντιστοιχεία

Αντιστοιχεία Παράδειγμα Παράδειγμα περιγραφής
[attribute] [target] Επιλέξτε κάθε στοιχείο που έχει το όρισμα target.
[attribute=value] [target=_blank] Επιλέξτε κάθε στοιχείο που έχει το όρισμα target="_blank".
[attribute~=value] [title~=flower] Επιλέξτε κάθε στοιχείο που έχει το όρισμα title που περιέχει τη λέξη "flower".
[attribute|=value] [lang|=en] Επιλέξτε κάθε στοιχείο που έχει το όρισμα lang που ξεκινά με το "en".
[attribute^=value] a[href^="https"] Επιλέξτε κάθε στοιχείο <a> που το όρισμα href ξεκινά με το "https".
[attribute$=value] a[href$=".pdf"] Επιλέξτε κάθε στοιχείο <a> που το όρισμα href ολοκληρώνεται με το ".pdf".
[attribute*=value] a[href*="codew3c"] Επιλέξτε κάθε στοιχείο <a> που περιέχει την υποσύνθεση "codew3c" στην αξία του χαρακτηριστικού href.

Εκτεταμένη Ανάγνωση

Βιβλία Εξωτερικής Εκπαίδευσης:Συμπεριφορά Επιλογέων Χαρακτηριστικών CSS