Μπορείτε να αναφερθείτε σε λεγόμενα παιδικά στοιχεία. Αυτά είναι αυτά που είναι άμεσα υποκατηγορίες άλλων στοιχείων. Αυτό ακούγεται κάπως αφηρημένο, αλλά μπορεί να εξηγηθεί ωραία μέσω ενός παραδείγματος.
<body> <p>Παράγραφος 1</p> <p>Παράγραφος 2</p> <p>Παράγραφος 3</p> </body>
Εδώ το body είναι το γονικό στοιχείο. Τα στοιχεία p είναι παιδιά του body. Με βάση αυτήν τη γνώση, μπορεί να εφαρμοστεί τον επιλογέα του παιδικού στοιχείου.
body>p {
color: blue;
}
Αυτή η σύνταξη ορίζει όλες τις παραγράφους που είναι άμεσα παιδιά του body να έχουν μπλε χρώμα.
Το παρακάτω παράδειγμα δείχνει ξανά τις διαφορές μεταξύ των δύο εντολών body p και body>p.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Καλώς ήρθατε στο PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
body p {
color:#0066FF;
}
</style>
</head>
<body>
<p>Παράγραφος 1</p>
<p>Παράγραφος 2</p>
<p>Παράγραφος 3</p>
<div>
<p>Παράγραφος 4</p>
</div>
</body>
</html>Οι πρώτες τρεις καθορισμένες παραγράφους p είναι άμεσα παιδιά του body. Η εντολή body p αναθέτει μπλε χρώμα σε όλες τις παραγράφους κειμένου. Από την άλλη, το body>p επηρεάζει αποκλειστικά τις πρώτες τρεις παραγράφους κειμένου. Γι' αυτό το λόγο, αυτές οι παραγράφοι εμφανίζονται και σε μεγαλύτερη γραμματοσειρά.
Επόμενος, θέλω να σας παρουσιάσω τον επιλογέα συνεχόμενου στοιχείου. Αυτός ο επιλογέας επισημαίνει ένα στοιχείο που ακολουθεί άμεσα ένα άλλο στοιχείο και έχει το ίδιο γονικό στοιχείο με αυτό. Και πάλι, ένα παράδειγμα:
h1+p {
color: blue;
}
Με αυτήν τη σύνταξη, το χρώμα κειμένου μιας παραγράφου ορίζεται σε μπλε. Αυτό ισχύει ωστόσο μόνο εάν η παράγραφος ακολουθεί άμεσα έναν τίτλος πρώτης τάξης.
<!DOCTYPE html>
<html lang="de">
<head>
<title>Καλώς ήρθατε στο PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
color: blue;
}
</style>
</head>
<body>
<h1>Τίτλος</h1>
<p>Παράγραφος 1</p>
<h2>Τίτλος</h2>
<p>Παράγραφος 2</p>
<p>Παράγραφος 3</p>
<div>
<p>Παράγραφος 4</p>
</div>
</body>
</html>Κοιτάξτε το αποτέλεσμα στον περιηγητή.
Μόνο η πρώτη παράγραφος εμφανίζεται εδώ με μπλε γραφή. Οι υπόλοιπες παραγράφοι είναι μαύρες. Αυτό οφείλεται στο γεγονός ότι αυτά τα στοιχεία p δεν ακολουθούν τον h1, αλλά ακολουθούν τον h2.
Όσον αφορά τα στοιχεία συνεχούς στοιχείου, εισήχθησαν επιπλέον επιλογές στο CSS3. Έτσι, είναι πλέον δυνατό να αναφέρεστε σε όλα τα στοιχεία που ακολουθούν ένα συγκεκριμένο στοιχείο. Ένα παράδειγμα:
h1~p {
color: red;
}
Με αυτήν τη σύνταξη, όλες οι παραγράφοι που ακολουθούν μετά το h1 αναφέρονται.
Μπορεί να αναφερθούν όχι μόνο σε στοιχεία άμεσα. Είναι επίσης δυνατή η πρόσβαση μέσω των γνωρισμάτων των στοιχείων.
Εδώ μερικοί από αυτούς τους επιλογείς:
• [att] – Το στοιχείο πρέπει να περιέχει μόνο το γνώρισμα. Είναι αδιάφορο εάν δόθηκε ή όχι μια τιμή.
• a[href] – Επισημαίνονται όλοι οι υπερσύνδεσμοι (<a href=…>). Αυτό δεν ισχύει για τις οριστικοποιήσεις άγκυρας (<a name=…>).
• [align=left] – Επισημαίνει όλα τα στοιχεία, των οποίων το γνώρισμα align έχει την τιμή left.
• [attr~=value] – Επισημαίνονται όλα τα στοιχεία στα οποία η τιμή υπάρχει σε λίστα τιμών χωρισμένη με κενά.
• [attr|=value] – Επισημαίνει ένα στοιχείο, όταν η καθορισμένη τιμή βρίσκεται στην αρχή ενός χαρακτήρα διαχωρισμού μέσα σε μια συμβολοσειρά.
• img[width="200"] – Εδώ επισημαίνονται όλες οι εικόνες που έχουν πλάτος 200 pixel.
Φυσικά, η ερώτηση είναι πότε θα μπορούσατε πραγματικά να χρειαστείτε αυτούς τους επιλογείς γνωρισμάτων. Σκεφτείτε, για παράδειγμα, ένα φόρμα και τους κουμπιά ελέγχου που έχουν οριστεί μέσα σε αυτήν. Τα κουμπιά ελέγχου – κάτι που γνωρίζετε μέχρι τώρα – ορίζονται μέσω του στοιχείου εισόδου εισόδου. Το πρόβλημα είναι ότι το στοιχείο εισόδου χρησιμοποιείται επίσης για τον καθορισμό των κανονικών πεδίων κειμένου. Επομένως, μέσω του input δεν είναι δυνατή η διαφορετική μορφοποίηση για τα κουμπιά ελέγχου και τα πεδία κειμένου. Σε ακριβώς αυτό το σημείο οι επιλογείς γνωρισμάτων επηρεάζουν. Ρίξτε μια ματιά για καλύτερη κατανόηση σε αυτό το παράδειγμα:
<body> Όνομα: <input type="text" id="name" /> <br /> Άντρας: <input type="checkbox" name="gender" id="gender" /> <br /> Γυναίκα: <input type="checkbox" name="gender" id="gender" /> </body>
Εδώ καθορίστηκαν διάφορα στοιχεία φόρμας.
• ένα πεδίο κειμένου
• δύο κουμπιά ελέγχου
Αυτά τα πεδία πρέπει να μορφοποιηθούν.
input {
border:3px solid #000;
width: 10em;
}Στα πεδία εκχωρούνται ένα πλαίσιο και μία πλάτος.
Το πρόβλημα είναι: Το καθορισμένο πλάτος θα έπρεπε να εφαρμοστεί μόνο στο πεδίο κειμένου, όχι όμως και στις κουτίτσες επιλογής. Μέσω του επιλογέα στοιχείων δεν είναι δυνατή η διακριτοποίηση μεταξύ των διαφορετικών τύπων πεδίων. Για να λειτουργήσει μια τέτοια διάκριση, επιλέγονται οι επιλογείς χαρακτηριστικών. Ένα παράδειγμα γι' αυτό είναι:
input[type="checkbox"] {
width: auto;
}
Μέσω του επιλεγμένου επιλογέα προσπελαύνονται πραγματικά μόνο τα input στοιχεία, τα οποία διαθέτουν τον συνδυασμό χαρακτηριστικού-τιμής type="checkbox".
Επαναλήψεις
Το CSS προσφέρει πλέον τη δυνατότητα να αντιμετωπίσει επαναλήψεις. Φυσικά, ερχεται το ερώτημα, για τι μπορεί να χρησιμοποιηθεί κάτι τέτοιο. Οι επιλογείς αυτοί είναι χρήσιμοι, για παράδειγμα, όταν θέλουμε κάθε δεύτερη γραμμή ενός πίνακας να έχει διαφορετικό χρώμα. Πριν παρουσιάσω τους διαθέσιμους επιλογείς, ένα τυπικό παράδειγμα:
<ol id="sprachen">
<li>HTML</li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JScript</li>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ol>
Πρόκειται για μια κανονική λίστα σημείων. Με τη χρήση CSS, κάθε τρίτη καταχώρηση της λίστας θα πρέπει να εκχωρηθεί ένα χρώμα φόντου.
Χρησιμοποιείται ο επιλογέας nth-child(). Με αυτόν τον επιλογέα απευθυνόμαστε σε κάθε n-οστό παιδί-στοιχείο.
#sprachen li:nth-child(3n) {
background-color: red;
}
Οι ακόλουθοι επιλογείς είναι διαθέσιμοι:
• :root – Μέσω του επιλογέα :root είναι δυνατό να προσπελάσουμε τη ρίζα ενός εγγράφου.
• :nth-child(n) – Ελέγχει κάθε n-οστό στοιχείο μέσα σε ένα γονικό στοιχείο. Αυτός ο επιλογέας είναι χρήσιμος κυρίως όταν θέλουμε να σχεδιάσουμε διαφορετικά πολλά στοιχεία. Το n είναι μια σταθερά λέξη-κλειδί στην οποία μπορούν να εφαρμοστούν πράξεις αριθμητικής. Το n μπορεί να είναι ισοδύναμο με την τιμή 1.
• :nth-last-child(n) – Ελέγχει κάθε n-οστό στοιχείο μέσα σε ένα στοιχείο, με τα παιδιά να περνάνε από το πίσω μέρος.
• :nth-of-type(n) – Ελέγχει κάθε n-οστό στοιχείο του ίδιου τύπου HTML στο ίδιο επίπεδο.
• :nth-last-of-type(n) – Ελέγχει κάθε n-οστό στοιχείο στο ίδιο επίπεδο, με τα στοιχεία να περνάνε από το πίσω μέρος.
• :first-child – Ελέγχει το πρώτο παιδί του ενός στοιχείου.
• :last-child – Ελέγχει το τελευταίο παιδί του ενός στοιχείου.
• :first-of-type – Ελέγχει το πρώτο στοιχείο του ίδιου τύπου HTML μέσα σε ένα γονικό στοιχείο.
• :last-of-type – Ελέγχει το τελευταίο στοιχείο του ίδιου τύπου HTML μέσα σε ένα γονικό στοιχείο.
• :only-child – Ελέγχει ένα στοιχείο το οποίο δεν διαθέτει κανένα αδελφικό στοιχείο και αποτελεί το μοναδικό παιδί του γονικού στοιχείου.
• :only-of-type – Ελέγχει ένα στοιχείο το οποίο δεν διαθέτει κανένα αδελφικό στοιχείο του ίδιου τύπου HTML και αποτελεί το μοναδικό παιδί αυτού του τύπου στο γονικό στοιχείο.
• :empty – Ελέγχει κενά στοιχεία.
Οι παρουσιασμένοι επιλογείς κάνουν την εργασία με το HTML πολύ πιο εύκολη, καθώς οι περίπλοκοι ορισμοί κλάσεων ανήκουν στο παρελθόν.
