Επιλογές Υποελλήνων Εлементών του CSS

Στις σύγκρισεις με τους επιλογείς απογόνων, οι επιλογείς υποστοιχείων (Child selectors) επιλέγουν μόνο τα στοιχεία που είναι υποστοιχεία κάποιου στοιχείου.

Επιλογή υποστοιχείου

Αν δεν θέλετε να επιλέξετε οποιοδήποτε απόγονο στοιχείου, αλλά να περιορίσετε το εύρος, επιλέξτε τα υποστοιχεία του στοιχείου που θέλετε.

Για παράδειγμα, αν θέλετε να επιλέξετε μόνο τα στοιχεία <strong>strong</strong> που είναι υποστοιχεία του στοιχείου <h1>, μπορείτε να γράψετε ως εξής:

h1 > strong {κόκκινο;}

Αυτή η ρύθμιση θα μετατρέψει τα δύο στοιχεία <strong>strong</strong> κάτω από τον πρώτο <h1> σε κόκκινο, αλλά το <strong>strong</strong> του δεύτερου <h1> δεν θα επηρεαστεί:

<h1>Αυτό είναι <strong>πολύ</strong> <strong>πολύ</strong> σημαντικό.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

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

Επεξήγηση Γραμματικής

Πρέπει να έχετε παρατηρήσει ότι ο υποελλήνιος συνδετήρας χρησιμοποιεί το τελεστικό σημείο (υποελλήνιος συνδετήρας).

Τα δύο μέρη του υποελλήνου συνδετήρα μπορούν να περιέχουν κενά, τα οποία είναι προαιρετικά. Επομένως, η παρακάτω γραφή είναι αποδεκτή:

h1 > strong
h1> strong
h1 >strong
h1>strong

Αν διαβάσετε τον επιλογέα από δεξιά προς αριστερά, ο επιλογέας h1 > strong μπορεί να εξηγηθεί ως “Τα στοιχεία strong που είναι παιδιά του στοιχείου h1”.

Σύνδεση Προγονικών Επιλογών και Υποελλήνων Επιλογών

Δείτε τον παρακάτω επιλογέα:

table.company td > p

Η επιλογή αυτή θα επιλέξει όλους τους στοιχεία p που είναι παιδιά του στοιχείου td, το οποίο itself προέρχεται από το στοιχείο table που έχει την ιδιότητα class που περιέχει το company.