Ψευδοτάξεις CSS

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Τι είναι οι ψευδο-τάξεις;

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

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

  • Δώστε στυλ σε ένα στοιχείο όταν ένας χρήστης το ποντίκι πάνω του

  • Διαφορετικό στυλ επισκεπτόμενων και μη επισκεπτόμενων συνδέσμων

  • Δώστε στυλ σε ένα στοιχείο όταν εστιάζει

Mouse Over Me

Σύνταξη

Η σύνταξη των ψευδο-κλάσεων:

selector:pseudo-class {
  property: value;
}

Άγκυρα Ψευδοτάξεις

Οι σύνδεσμοι μπορούν να εμφανίζονται με διάφορους τρόπους:

Παράδειγμα

  /* unvisited link */
a:link {
  color: #FF0000;
}
/* visited 
link */
a:visited {
  color: #00FF00;
}
/* mouse over link */
a:hover {
  color: #FF00FF;
}
/* selected link */
a:active {
  color: #0000FF;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Styling a link depending on state</h2>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

Σημείωση: a:hover ΠΡΕΠΕΙ να ακολουθεί το a:link και a:visited στον ορισμό CSS για να είναι αποτελεσματική! Το a:active ΠΡΕΠΕΙ να ακολουθήσει a:hover στον ορισμό CSS για να είναι αποτελεσματική! Τα ονόματα ψευδο-τάξεων δεν κάνουν διάκριση πεζών-κεφαλαίων.

Ψευδο-κλάσεις και κλάσεις HTML

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

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

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
  color: #ff0000;
  font-size: 22px;
} 
</style>
</head>
<body>

<h2>Pseudo-classes and HTML Classes</h2>

<p>When you hover over the first link below, it will change color and font size:</p>

<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>

<p><a href="default.asp">CSS Tutorial</a></p>

</body>
</html>

Τοποθετήστε το δείκτη του ποντικιού στο <div>

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

Παράδειγμα

div:hover {
  background-color: blue;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: green;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: blue;
}
</style>
</head>
<body>

<p>Mouse over the div element below to change its background color:</p>

<div>Mouse Over Me</div>

</body>
</html>

Απλή επεξήγηση εργαλείου

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

Τάντα! Εδώ είμαι!

Παράδειγμα

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

div:hover p {
  display: block;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}
</style>
</head>
<body>

<div>Hover over this div element to show the p element
  <p>Tada! Here I am!</p>
</div>

</body>
</html>

CSS - Το :first-child Pseudo-class

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

Αντιστοιχίστε το πρώτο στοιχείο <p>

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

Παράδειγμα

p:first-child
{
   
color: blue;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>This is some text.</p>
<p>This is some text.</p>

<div>
  <p>This is some text.</p>
  <p>This is some text.</p>
</div>

</body>
</html>

Αντιστοιχίστε το πρώτο στοιχείο <i> σε όλα τα στοιχεία <p>

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

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

</body>
</html>

Αντιστοιχίστε όλα τα στοιχεία <i> σε όλα τα πρώτα θυγατρικά στοιχεία <p>

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

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child i {
  color: blue;
} 
</style>
</head>
<body>

<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
<p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>

<div>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
  <p>I am a <i>strong</i> person. I am a <i>strong</i> person.</p>
</div>

</body>
</html>

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

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

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

Παράδειγμα

<html>
<head>
<style>
  q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> 
Some text.</p>

</body>
</html>

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>In this example, :lang defines the quotation marks for q elements with lang="no":</p>

</body>
</html>

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

Προσθέστε διαφορετικά στυλ σε υπερσυνδέσμους

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>

<h2>Styling Links</h2>

<p>Mouse over the links and watch them change layout:</p>

<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>

</body>
</html>

Χρήση του :focus

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
  background-color: yellow;
}
</style>
</head>
<body>

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Όλες οι ψευδοτάξεις CSS

: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> που είναι το πρώτο στοιχείο <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> που είναι το τελευταίο στοιχείο <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> που είναι το δεύτερο στοιχείο <p> του γονέα του, μετρώντας από το τελευταίο παιδί

:nth-of-type(n)

Παράδειγμα:

p:nth-of-type(2)

Παράδειγμα περιγραφής:

Επιλέγει κάθε στοιχείο <p> που είναι το δεύτερο στοιχείο <p> του γονέα του

:only-of-type

Παράδειγμα:

p:only-of-type

Παράδειγμα περιγραφής:

Επιλέγει κάθε στοιχείο <p> που είναι το μόνο στοιχείο <p> του γονέα του

:only-child

Παράδειγμα:

p:only-child

Παράδειγμα περιγραφής:

Επιλέγει κάθε στοιχείο <p> που είναι το μοναδικό παιδί του γονέα του

:optional

Παράδειγμα:

input:optional

Παράδειγμα περιγραφής:

Επιλέγει στοιχεία <input> χωρίς χαρακτηριστικό "απαιτούμενο".

:out-of-range

Παράδειγμα:

input:out-of-range

Παράδειγμα περιγραφής:

Επιλέγει στοιχεία <input> με τιμή έξω από ένα καθορισμένο εύρος

:read-only

Παράδειγμα:

input:read-only

Παράδειγμα περιγραφής:

Επιλέγει στοιχεία <input> με καθορισμένο χαρακτηριστικό "μόνο για ανάγνωση".

:read-write

Παράδειγμα:

input:read-write

Παράδειγμα περιγραφής:

Επιλέγει στοιχεία <input> χωρίς χαρακτηριστικό "readonly".

:required

Παράδειγμα:

input:required

Παράδειγμα περιγραφής:

Επιλέγει στοιχεία <input> με καθορισμένο χαρακτηριστικό "απαιτούμενο".

:root

Παράδειγμα:

root

Παράδειγμα περιγραφής:

Επιλέγει το ριζικό στοιχείο του εγγράφου

:target

Παράδειγμα:

#news:target

Παράδειγμα περιγραφής:

Επιλέγει το τρέχον ενεργό στοιχείο #news (κάναμε κλικ σε μια διεύθυνση URL που περιέχει αυτό το όνομα αγκύρωσης)

:valid

Παράδειγμα:

input:valid

Παράδειγμα περιγραφής:

Επιλέγει όλα τα στοιχεία <input> με έγκυρη τιμή

:visited

Παράδειγμα:

a:visited

Παράδειγμα περιγραφής:

Επιλέγει όλους τους συνδέσμους που έχετε επισκεφτεί

Όλα τα ψευδοστοιχεία CSS

::after

Παράδειγμα:

p::after

Παράδειγμα περιγραφής:

Εισαγάγετε περιεχόμενο μετά από κάθε στοιχείο <p>

::before

Παράδειγμα:

p::before

Παράδειγμα περιγραφής:

Εισαγάγετε περιεχόμενο πριν από κάθε στοιχείο <p>

::first-letter

Παράδειγμα:

p::first-letter

Παράδειγμα περιγραφής:

Επιλέγει το πρώτο γράμμα κάθε στοιχείου <p>

::first-line

Παράδειγμα:

p::first-line

Παράδειγμα περιγραφής:

Επιλέγει την πρώτη γραμμή κάθε στοιχείου <p>

::marker

Παράδειγμα:

::marker

Παράδειγμα περιγραφής:

Επιλέγει τους δείκτες των στοιχείων της λίστας

::selection

Παράδειγμα:

p::selection

Παράδειγμα περιγραφής:

Επιλέγει το τμήμα ενός στοιχείου που επιλέγεται από έναν χρήστη