5.4 Οι ψευδοκλάσεις (pseudo-classes) στην CSS

Οι ψευδοκλάσεις (pseudo-classes) χρησιμοποιούνται για να καθορίσουν ένα ειδικό κατάσταση ενός στοιχείου.

Για παράδειγμα, μπορούν να χρησιμοποιηθούν για:

• Να εφαρμόσουν στυλ σε ένα στοιχείο όταν ο χρήστης περνά το ποντίκι πάνω του (hover).
• Να εφαρμόσουν διαφορετικά στυλ σε συνδέσμους που έχουν ήδη επισκεφτείτε (visited) και σε συνδέσμους που δεν έχουν επισκεφτεί (unvisited).
• Να εφαρμόσουν στυλ σε ένα στοιχείο όταν αυτό λαμβάνει εστίαση (focus).

Οι ψευδοκλάσεις συνήθως προστίθενται στο τέλος του επιλογέα με τον χαρακτήρα “:”. Για παράδειγμα:

a:hover {
  /* Στυλ για τον σύνδεσμο όταν ο χρήστης περνά το ποντίκι πάνω του */
}

a:visited {
  /* Στυλ για τον επισκεφθέντα σύνδεσμο */
}

input:focus {
  /* Στυλ για το πεδίο εισαγωγής όταν λαμβάνει εστίαση */
}

Με τη χρήση των ψευδοκλάσεων, μπορείτε να προσαρμόσετε την εμφάνιση των στοιχείων στις διάφορες καταστάσεις τους.

Οι ψευδοκλάσεις μπορούν να συνδυαστούν με τις κλάσεις HTML:

Όταν το ποντίκι περνά πάνω από τον σύνδεσμο στο παράδειγμα, θα αλλάξει το χρώμα του:

<a class="my-link" href="#">Hover over me</a>

.my-link:hover {
  color: red;
}

Σε αυτό το παράδειγμα, ο σύνδεσμος έχει μια κλάση “my-link” και όταν ο χρήστης περνά το ποντίκι πάνω από τον σύνδεσμο, εφαρμόζεται η ψευδοκλάση :hover για να αλλάξει το χρώμα του συνδέσμου σε κόκκινο.

Αυτός ο συνδυασμός κλάσης και ψευδοκλάσης επιτρέπει την εφαρμογή στυλ σε στοιχεία με βάση την κατάσταση τους και την παρουσία συγκεκριμένων κλάσεων.

Ένα παράδειγμα χρήσης της ψευδοκλάσης :hover σε ένα στοιχείο <div>:

<div class="my-div">Hover over me</div>

.my-div:hover {
  background-color: yellow;
}

Σε αυτό το παράδειγμα, ένα στοιχείο <div> έχει μια κλάση “my-div”. Όταν ο χρήστης περνά το ποντίκι πάνω από το στοιχείο, εφαρμόζεται η ψευδοκλάση :hover για να αλλάξει το χρώμα του φόντου του στοιχείου σε κίτρινο.

[adinserter block=”2″]

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

Για να εμφανίσετε ένα στοιχείο <p> (όπως ένα tooltip) όταν ο χρήστης περνάει το ποντίκι πάνω από ένα στοιχείο <div>, μπορείτε να χρησιμοποιήσετε την ψευδοκλάση :hover και να εφαρμόσετε στυλ στο στοιχείο <p>.

Ας δούμε το παράδειγμα:

<style>
  .tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .tooltip:hover .tooltiptext {
    display: block;
  }

  .tooltiptext {
    display: none;
    position: absolute;
    background-color: yellow;
    padding: 5px;
    border-radius: 3px;
    top: 100%;
    left: 0;
    width: 150px;
  }
</style>

<div class="tooltip">
  Hover over me
  <p class="tooltiptext">This is a tooltip</p>
</div>

Σε αυτό το παράδειγμα, ο στοιχείο <div> έχει μια κλάση “tooltip”. Όταν ο χρήστης περνάει το ποντίκι πάνω από το <div>, εφαρμόζεται η ψευδοκλάση :hover, και το στοιχείο <p> με κλάση “tooltiptext” εμφανίζεται.

Το στοιχείο <p> που λειτουργεί ως tooltip έχει το στυλ display: none για να αρχικά μην εμφανίζεται. Όταν εφαρμόζεται η ψευδοκλάση :hover στον γονικό <div>, τότε το <p> εμφανίζεται με το στυλ display: block.

Μπορείτε να προσαρμόσετε τα στυλ και το περιεχόμενο του tooltip σύμφωνα με τις ανάγκες σας.

Η ψευδοκλάση :first-child ταιριάζει σε ένα συγκεκριμένο στοιχείο που είναι το πρώτο παιδί ενός άλλου στοιχείου.

Για να ταιριάξετε το πρώτο στοιχείο <p>, μπορείτε να χρησιμοποιήσετε την ψευδοκλάση :first-child με τον επιθυμητό έλεγχο επιλογής.

Ας δούμε ένα παράδειγμα:

<style>
  p:first-child {
    color: red;
  }
</style>

<div>
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>
  <p>This is the third paragraph.</p>
</div>

Σε αυτό το παράδειγμα, το στυλ color: red; εφαρμόζεται στο πρώτο στοιχείο <p>, δηλαδή το “This is the first paragraph.”.

Η ψευδοκλάση :first-child επιλέγει μόνο τα στοιχεία που είναι το πρώτο παιδί του γονικού τους στοιχείου. Εάν θέλετε να επιλέξετε το πρώτο <p> σε οποιοδήποτε επίπεδο εντός του γονικού στοιχείου, μπορείτε να χρησιμοποιήσετε τη σύνταξη div > p:first-child.

Για να ταιριάξετε το πρώτο στοιχείο <i> σε κάθε στοιχείο <p>, μπορείτε να συνδυάσετε την ψευδοκλάση :first-child με τον επιλογέα ποταμίσματος (>). Ας δούμε ένα παράδειγμα:

<style>
  p > i:first-child {
    color: blue;
  }
</style>

<div>
  <p><i>This is the first italic element.</i> This is some text.</p>
  <p><i>This is another italic element.</i> This is some more text.</p>
</div>

Σε αυτό το παράδειγμα, το στυλ color: blue; εφαρμόζεται στο πρώτο στοιχείο <i> σε κάθε στοιχείο <p>. Δηλαδή, το “This is the first italic element.” θα έχει μπλε χρώμα, ενώ το “This is another italic element.” θα έχει το προεπιλεγμένο χρώμα.

[adinserter block=”3″]

Η σύνταξη p > i:first-child επιλέγει το πρώτο <i> παιδί σε κάθε στοιχείο <p>.

Για να ταιριάξετε όλα τα στοιχεία <i> σε στοιχεία <p> που είναι το πρώτο παιδί άλλου στοιχείου, μπορείτε να συνδυάσετε την ψευδοκλάση :first-child με τον επιλογέα ποταμίσματος (>). Ας δούμε ένα παράδειγμα:

<style>
  :first-child > p > i {
    color: blue;
  }
</style>

<div>
  <p><i>This is the first italic element.</i> This is some text.</p>
  <p><i>This is another italic element.</i> This is some more text.</p>
</div>

Σε αυτό το παράδειγμα, το στυλ color: blue; εφαρμόζεται σε όλα τα στοιχεία <i> που βρίσκονται μέσα σε στοιχεία <p>, τα οποία είναι το πρώτο παιδί ενός άλλου στοιχείου. Δηλαδή, και τα “This is the first italic element.” και “This is another italic element.” θα έχουν μπλε χρώμα.

Η ψευδοκλάση :lang σας επιτρέπει να ορίσετε ειδικούς κανόνες για διάφορες γλώσσες.

Στο παρακάτω παράδειγμα, η :lang ορίζει τα εισαγωγικά για τα στοιχεία <q> με την ιδιότητα lang="no":

<style>
  q:lang(no) {
    quotes: "«" "»";
  }
</style>

<p>This is a <q lang="en">quote in English</q>.</p>
<p>This is a <q lang="no">quote in Norwegian</q>.</p>

Σε αυτό το παράδειγμα, ορίζεται ο κανόνας quotes: "«" "»"; για τα στοιχεία <q> με την ιδιότητα lang="no". Αυτό σημαίνει ότι τα εισαγωγικά για τα στοιχεία <q> με γλώσσα “no” θα είναι «και»» (αντί για τα προεπιλεγμένα εισαγωγικά). Έτσι, το “This is a quote in Norwegian” θα εμφανιστεί ως «quote in Norwegian».

Παρακάτω παραθέτω τις ψευδείς κλάσεις (pseudo classes) της CSS, με τα παραδείγματα και μια περιγραφή για κάθε μία από αυτές: