Επιλογείς (selectors)

Επιλογέας ετικέτας (tag selector ή element selector)

Επιλέγει το σύνολο των ετικετών με συγκεκριμένο όνομα ετικέτας. Για παράδειγμα όλες οι ετικέτες p.

p {
	color: blue;
	line-height: 1.5;
}

Επιλογέας id (id selector)

Εάν έχετε δώσει id σε μια ετικέτα τότε μπορείτε να την επιλέξετε ως εξής:

#green {
	color: green;
}

Η παραπάνω εντολή θα επιλέξει την ετικέτα που έχει αυτό το id. Για παράδειγμα:

<p id="green">Αυτή είναι μια παράγραφος με κλάση τύπου id.</p>

Μπορείτε επίσης να γράψετε:

p#green {
	color: green;
}

Επιλογέας κλάσης (class selector)

Εάν έχετε δώσει την ιδιότητα class σε μία ή περισσότερες ετικέτες τότε μπορείτε να τις επιλέξετε ως εξής:

.green {
	color: green;
}

Η παραπάνω εντολή θα επιλέξει τις ετικέτες που έχουν την ιδιότητα class = "green". Για παράδειγμα:

<p class="green">Αυτή είναι μια παράγραφος με κλάση green.</p>

ή/και

<div class="green">Αυτό είναι ένα div με κλάση green.</div>

Μπορείτε επίσης να γράψετε:

p.green {
	color: green;
}

αν θέλετε αυτός ο επιλογέας κλάσης να ισχύει μόνο για p (paragraphs).

Ομάδες (Grouping Selector)

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

h1, h2, h3, h4, h5, h6 {
	color: green;
}

ή

.green, .red {
	font-size: 16p;
	line-height: 1.5;
}
.green {
	color: green;
}
.red {
	color: red;
}

Συνδυασμός επιλογέων (combinators) ή children selectors

Μπορούμε να συνδυάσουμε επιλογείς για πιο σύνθετες και ειδικές επιλογές στοιχείων html.

Υπο-επιλογέας (χωρίζεται με διάστημα)

Επιλέγει στοιχεία που βρίσκονται μέσα σε έναν άλλο επιλογέα (children).

div p {
	text-align: center;
	color: blue;
	font-family: arial;
}

Επίσης

nav#top-menu a {
	text-decoration: none;
	color: pink;
	padding: 5px 10px;
}

Στο παραπάνω παράδειγμα, επιλέγονται μόνο τα a που βρίσκονται μέσα στο nav με id = "top-menu".

nav#top-menu div a {
	text-decoration: none;
	color: pink;
	padding: 5px 10px;
}

Επιλογέας άμεσων παιδιών (direct children selector (>))

Ισχύει ό,τι και για τον υπο-επιλογέα αλλά μόνο για τα πρώτα (άμεσα) παιδιά.

div > p {
	text-align: center;
	color: blue;
	font-family: arial;
}

div > article > p {
	text-align: center;
	color: blue;
	font-family: arial;
}

Επιλογέας επόμενων

Επιλέγει τα ακριβώς επόμενα στοιχεία

h1 + p {
	font-weight: bold;
	color: blue;
}

Επιλογέας αδελφών (Sibling Selector (~))

Επιλέγει στοιχεία που είναι διπλανά ή αδέλφια.

div ~ p {
  background-color: orange;
}

	<p>Paragraph 1</p>
	<div>
		<p>Paragraph 2</p>
	</div>
	<p>Paragraph 3</p>
	<p>Paragraph 4</p>

Ψευδο-κλάσεις (Pseudo-classes)

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

Η ψευδοκλάση προστίθεται σε έναν επιλογέα με το σύμβολο :.

a:hover {
	color: #FF00FF;
}

a:active {
	color: #0000FF;
}

div:hover p {
	display: block;
}

Συνολικά έχουμε τις παρακάτω ψευδοκλάσεις.

Ψευδο-στοιχεία (Pseudo Elements)

Χρησιμοποιούνται για την επιλογή μέρους ενός στοιχείου. Για παράδειγμα το αρχίγραμμα μιας παραγράφου.

Η ψευδοκλάση προστίθεται σε έναν επιλογέα με το σύμβολο ::.

p::first-letter {
	color: #ff0000;
	font-size: xx-large;
}

p::first-line {
	color: #ff0000;
	font-variant: small-caps;
}

Πίνακας με σύνολο προτύπων και παραδείγματα επιλογέων