Πseudo-κλάση CSS

What is a pseudo-class?

Pseudo-classes are used to define the special state of elements.

For example, it can be used for:

  • Set the style when the mouse hovers over the element
  • Set different styles for visited and unvisited links
  • Set the style when the element gets focus
Hover over me

Syntax

pseudo-class syntax:

selector:pseudo-class {
  property: value;
}

Anchor pseudo-class

Links can be displayed in different ways:

Παράδειγμα

/* Unvisited link */
a:link {
  color: #FF0000;
}
/* Visited link */
a:visited {
  color: #00FF00;
}
/* Hovering link */
a:hover {
  color: #FF00FF;
}
/* Selected link */
a:active {
  color: #0000FF;
}

Δοκιμάστε το!

Note:a:hover must be in the CSS definition a:link and a:visited before they can take effect!a:active must be in the CSS definition a:hover They can take effect only after!

Pseudo-classes and CSS classes

Pseudo-classes can be used with CSS classes:

When you hover over the link in the example, it changes color:

Παράδειγμα

a.highlight:hover {
  color: #ff0000;
}

Δοκιμάστε το!

hover over <div>

used on <div> element :hover pseudo-class instance:

Παράδειγμα

div:hover {
  background-color: blue;
}

Δοκιμάστε το!

Σύντομη εργαλειοθήκη hover

Αν τοποθετήσετε τον δείκτη πάνω στο στοιχείο <div>, θα εμφανιστεί το στοιχείο <p> (σχεδόν όπως μια εργαλειοθήκη):

Αν τοποθετήσετε τον δείκτη πάνω μου, θα εμφανιστεί το στοιχείο <p>.

Χαχα, είμαι εδώ!

Παράδειγμα

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}
div:hover p {
  display: block;
}

Δοκιμάστε το!

CSS - :first-child ψευδοκλάση

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

Ταίριασμα του πρώτου στοιχείου <p>

Στο παρακάτω παράδειγμα, ο επιλεγτής ταιριάζει σε κάθε στοιχείο <p> που είναι ο πρώτος γιος οποιουδήποτε άλλου στοιχείου:

Παράδειγμα

p:first-child {
  color: blue;
}

Δοκιμάστε το!

Ταίριασμα όλων των στοιχείων <i> μέσα σε κάθε στοιχείο <p>

Στο παρακάτω παράδειγμα, ο επιλεγτής ταιριάζει σε όλα τα στοιχεία <i> που είναι ο πρώτος γιος ενός στοιχείου <p>:

Παράδειγμα

p i:first-child {
  color: blue;
}

Δοκιμάστε το!

Ταίριασμα όλων των στοιχείων <i> μέσα σε κάθε πρώτο στοιχείο <p>

Στο παρακάτω παράδειγμα, ο επιλεγτής ταιριάζει σε όλα τα στοιχεία <i> μέσα σε ένα στοιχείο <p> που είναι ο πρώτος γιος του άλλου στοιχείου:

Παράδειγμα

p:first-child i {
  color: blue;
}

Δοκιμάστε το!

CSS - :lang ψευδοκλάση

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

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

Παράδειγμα

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>Μερικοί κείμενο <q lang="no">Μια αναφορά σε ένα κείμενο</q> Μερικοί κείμενο.</p>
</body>
</html>

Δοκιμάστε το!

Περισσότερα παραδείγματα

Προσθήκη διαφορετικών στυλ σε υπερσύνδεσμοι
Αυτό το παράδειγμα δείχνει πώς να προσθέσετε άλλες στυλ σε υπερσύνδεσμοι.
Χρήση :focus
Αυτό το παράδειγμα δείχνει πώς να χρησιμοποιήσετε τη ψευδοκλάση :focus.

Όλες οι CSS ψευδοκλάσεις

Selector Example Example description
:active a:active Επιλέξτε κάθε ενεργή σύνδεσμο.
:checked input:checked Επιλέξτε κάθε στοιχείο <input> που είναι επιλεγμένο.
:disabled input:disabled Επιλέξτε κάθε στοιχείο <input> που είναι απενεργοποιημένο.
:empty p:empty Επιλέξτε κάθε στοιχείο <p> χωρίς υποστοιχεία.
:enabled input:enabled Επιλέξτε κάθε στοιχείο <input> που είναι ενεργοποιημένο.
:first-child p:first-child Επιλέξτε κάθε στοιχείο <p> που είναι το πρώτο υποστοιχείο του γονικού στοιχείου του.
:first-of-type p:first-of-type Επιλέξτε κάθε στοιχείο <p> που είναι το πρώτο στοιχείο του γονικού στοιχείου του.
:focus input:focus Επιλέξτε κάθε στοιχείο <input> που έχει το ενδιαφέρον του χρήστη.
:hover a:hover Επιλέξτε κάθε σύνδεσμο που βρίσκεται στον τοπικό υπολογιστή του χρήστη.
:in-range input:in-range Επιλέξτε κάθε στοιχείο <input> που έχει τιμή εντός του καθορισμένου διαστήματος.
:invalid input:invalid Επιλέξτε κάθε στοιχείο <input> που έχει μη έγκυρη τιμή.
:lang(language) p:lang(it) Επιλέξτε κάθε στοιχείο <p> που έχει την τιμή της ιδιότητας lang που ξεκινά με "it".
:last-child p:last-child Επιλέξτε κάθε στοιχείο <p> που είναι το τελευταίο υποστοιχείο του γονικού στοιχείου του.
:last-of-type p:last-of-type Επιλέξτε κάθε στοιχείο <p> που είναι το τελευταίο στοιχείο του γονικού στοιχείου του.
:link a:link Επιλέξτε κάθε σύνδεσμο που δεν έχει επισκεφθεί.
:not(selector) :not(p) Επιλέξτε κάθε στοιχείο που δεν είναι στοιχείο <p>.
:nth-child(n) p:nth-child(2) Επιλέξτε κάθε στοιχείο <p> που είναι το δεύτερο υποστοιχείο του γονικού στοιχείου του.
:nth-last-child(n) p:nth-last-child(2) Επιλέξτε κάθε στοιχείο <p> που είναι το δεύτερο υποστοιχείο του γονικού στοιχείου του, μετράοντας από τον τελευταίο υποστοιχείο.
:nth-last-of-type(n) p:nth-last-of-type(2) Επιλέξτε κάθε στοιχείο <p> που είναι το δεύτερο στοιχείο του γονικού στοιχείου του, μετράοντας από τον τελευταίο υποστοιχείο.
:nth-of-type(n) p:nth-of-type(2) Επιλέξτε κάθε στοιχείο <p> που είναι το δεύτερο στοιχείο του γονικού στοιχείου του.
:only-of-type p:only-of-type Επιλέξτε κάθε στοιχείο <p> που είναι το μοναδικό στοιχείο τύπου του γονικού στοιχείου του.
:only-child p:only-child Επιλέξτε το στοιχείο <p> που είναι το μοναδικό παιδί του γονικού στοιχείου του.
:optional optional:input Select <input> elements that do not have the "required" attribute.
:out-of-range input:out-of-range Select <input> elements whose values are out of the specified range.
:read-only input:read-only Select <input> elements that have specified the "readonly" attribute.
:read-write input:read-write Select <input> elements that do not have the "readonly" attribute.
:required input:required Select <input> elements that have specified the "required" attribute.
:root root Select the root element of the element.
:target #news:target Select the currently active #news element (click on the URL containing the anchor name).
:valid input:valid Select all <input> elements with valid values.
:visited a:visited Select all visited links.

All CSS pseudo-elements

Selector Example Example description
::after p::after Insert content after each <p> element.
::before p::before Insert content before each <p> element.
::first-letter p::first-letter Select the first letter of each <p> element.
::first-line p::first-line Select the first line of each <p> element.
::selection p::selection Select the part of the element chosen by the user.