Χρήση του id στο CSS
Κατά τη χρήση του id είναι διαθέσιπες όλες
οι χειρισμοί με επιλογείς που μάθαμε
στα προηγούμενα μαθήματα.
Παράδειγμα
Ας υποθέσουμε ότι έχουμε τον ακόλουθο κώδικα:
<div id="block">
<h2>Title</h2>
<p>text</p>
<p>text</p>
</div>
Ας επιλέξουμε το h2 από το στοιχείο με
id ίσο με block και ας το
βάψουμε με κόκκινο χρώμα:
#block h2 {
color: red;
}
Τώρα ας επιλέξουμε τα p από το στοιχείο με
id ίσο με block και ας τα
βάψουμε με πράσινο χρώμα:
#block p {
color: green;
}
Παράδειγμα
Ας υποθέσουμε τώρα ότι έχουμε τον ακόλουθο κώδικα:
<div id="block">
<h2 class="header">Title</h2>
<p>text</p>
<p>text</p>
<h3 class="header">Title</h3>
<p>text</p>
<p>text</p>
</div>
Ας επιλέξουμε τα στοιχεία με κλάση header,
που βρίσκονται μέσα στο στοιχείο με id
ίσο με block, και ας τα βάψουμε
με κόκκινο χρώμα:
#block .header {
color: red;
}
Τώρα ας επιλέξουμε τις επικεφαλίδες h2 με κλάση
header, που βρίσκονται μέσα στο στοιχείο
με id ίσο με block, και ας τις
βάψουμε με κόκκινο χρώμα:
#block h2.header {
color: red;
}
Πρακτικές Ασκήσεις
Γράψτε έναν επιλογέα που θα επιλέγει όλα τα h2,
που βρίσκονται μέσα στο στοιχείο με id ίσο
με elem. Ελέγξτε τον επιλογή σας με τον ακόλουθο
κώδικα:
<div id="elem">
<h2>Choose</h2>
<p>---</p>
<h2>Choose</h2>
<p>---</p>
</div>
<h2>Do not +++</h2>
<p>---</p>
Γράψτε έναν επιλογέα που θα επιλέγει όλα τα στοιχεία
με κλάση text, που βρίσκονται μέσα στο στοιχείο
με id ίσο με elem. Ελέγξτε
τον επιλογέα σας με τον ακόλουθο κώδικα:
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
Γράψτε έναν επιλογέα που θα επιλέγει όλες τις παραγράφους
με κλάση text, που βρίσκονται μέσα στο στοιχείο
με id ίσο με elem. Ελέγξτε
τον επιλογέα σας με τον ακόλουθο κώδικα:
<div id="elem">
<p class="text">+++</p>
<p class="text">+++</p>
<ul>
<li class="text">---</li>
<li class="text">---</li>
<li class="text">---</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
Γράψτε έναν επιλογέα που θα επιλέγει όλα τα li
με κλάση text, που βρίσκονται μέσα στο στοιχείο
με id ίσο με elem. Ελέγξτε
τον επιλογέα σας με τον ακόλουθο κώδικα:
<div id="elem">
<p class="text">---</p>
<p class="text">---</p>
<ul>
<li class="text">+++</li>
<li class="text">+++</li>
<li class="text">+++</li>
<li>---</li>
<li>---</li>
</ul>
</div>
<p class="text">---</p>
