Next

Επιλογέας id

Νωρίτερα δείξαμε ότι οι επιλογείς (selectors ) στοιχείων μπορούν να χρησιμοποιηθούν για τον ορισμό του στοιχείου στο οποίο θέλουμε να εφαρμόσουμε τα στυλ μας.
Ωστόσο, υπάρχουν πρόσθετοι επιλογείς. Το id είναι ένας από αυτούς..

Οid selector δημιουργείται από το hashtag # ακολουθούμενο από το όνομα του επιλογέα. Το όνομα μπορεί να είναι οτιδήποτε, αλλά δεν μπορεί να ξεκινήσει με ένα ψηφίο ή μια παύλα (dash).

Ο επιλογέας id επιλέγει στοιχεία με συγκεκριμένο χαρακτηριστικό όνομα ( id attribute -name).
Έτσι, στο CSS μας το id θα είναι:

#myname { border: 2px solid black; }

Και στο HTML θα έχουμε:

<p id=”myname”>

Αυτή η παράγραφος θα έχει ένα μαύρο περίγραμμα. 

Πότε χρησιμοποιούμε τους επιλογείς id;

Ο βασικός κανόνας είναι ότι το id είναι μοναδικό. Αυτό σημαίνει ότι ένα id will θα υπάρχει μόνο μία φορά στη σελίδα HTML και ότι κάθε στοιχείο μπορεί να περιέχει μόνο ένα id.
Δεδομένου ότι τα IDs είναι μοναδικά, τα χρησιμοποιούμε μόνο αν θέλουμε να εφαρμόσουμε ένα συγκεκριμένο στυλ σε ένα στοιχείο για να το διακρίνουμε από τα περιβάλλοντα στοιχεία.

Για παράδειγμα, έστω ότι έχουμε 100 παραγράφους στις οποίες έχουμε εφαρμόσει το ακόλουθο στυλ:

p { text-align:center; font-size: 1em; }

Ας υποθέσουμε ότι θέλουμε μία από αυτές τις παραγράφους να εμφανίζεται με πλάγιους χαρακτήρες. Αυτό μπορεί να επιτευχθεί με την εφαρμογή ενός id στη συγκεκριμένη παράγραφο. Έτσι στο CSS θα έχουμε:

#italicparagraph { font-style: italic; }

Και στο αντίστοιχο HTML:

<body>
<p> </p>
………
<p id=” italicparagraph”> My italic paragraph </p>
..
<p> </p>
</body>

Ωστόσο, αν θέλουμε να εμφανίζονται με πλάγια γράμματα περισσότερες από μία παράγραφοι, τότε το id δεν πρέπει να χρησιμοποιείται.

Αν χρησιμοποιήσετε id θα έχετε πράγματι το επιθυμητό αποτέλεσμα. Ωστόσο, ο κωδικός σας δεν θα είναι λειτουργικός για τη JavaScript, όπως θα δούμε αργότερα στο μάθημα.


Υπάρχει ένας εναλλακτικός επιλογέας που είναι κατάλληλος για αυτήν την περίπτωση, ο οποίος εξηγείται στην επόμενη ενότητα.

Παράδειγμα

Οι κανόνες CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        #rainbowColors {background: grey}
        #red {background: red}
        #orange {background: orange}
        #yellow {background: yellow}
        #green {background: green}
        #blue {background: blue}
        #indigo {background: indigo}
        #violet {background: violet}
    </style>
  </head>
  <body>
    <ul id="rainbowColors">
        <li id="red">Red</li>
        <li id="orange">Orange</li>
        <li id="yellow">Yellow</li>
        <li id="green">Green</li>
        <li id="blue">Blue</li>
        <li id="indigo">Indigo</li>
        <li id="violet">Violet</li>
    </ul>
  </body>
</html>


θα δημιουργήσουν μια σελίδα που εμφανίζεται ως:

id selector

Παράδειγμα

  1. Ανοίξτε τον επεξεργαστή κώδικα, δημιουργήστε ένα νέο αρχείο και αποθηκεύστε το ως exersice04.1.01.html στον φάκελο "Exercises".
  2. Αντιγράψτε τον παραπάνω κώδικα και επικολλήστε τον στο νέο αρχείο.
  3. Επεξεργαστείτε το αρχείο. Στον browser θα πρέπει να εμφανίζεται η επόμενη εικόνα::

id selector

Λύση:

Next