1. Ο επιλογέας “+”

#container p + span {
color: #f9f9f9;
text-decoration:underline;
}

Κάνοντας αυτή την επιλογή, θα επιλέξουμε μόνο το πρώτο span που θα βρεθεί μέσα σε μια παράγραφο στο div container, και θα του δώσουμε λευκό χρώμα, και υπογράμμιση. Γενικότερα ο επιλογέας “+” επιλέγει μόνο το πρώτο στοιχείο που βρίσκεται μεσα σε ένα άλλο. Στην συγκεκριμένη περίπτωση το πρώτο span που θα βρεθεί μέσα σε μια παράγραφο.

2. Ο επιλογέας “:not”

div:not(.sidebar) {
color: #f9f9f9;
text-decoration:underline;
}

Κάνοντας αυτήν την επιλογή, θα επιλέξουμε όλα τα divs στην σελίδα μας, εκτός από αυτό που έχει class=”sidebar”. Γενικότερα με τον selector “:not” μπορούμε να εξαιρέσουμε από την επιλογή μας συγκεκριμένα στοιχεία.

3. Ο επιλογέας “:after”

#container p:after{
height:1px;
width:100%;
border:1px solid #000;
clear: both;
display:block;
}

Κάνοντας αυτήν την επιλογή, θα προστεθεί μετά από κάθε παράγραφο στο div container ένα “κουτί” ύψους ενός pixel και με border 1 pixel. Με άλλα λόγια κάτω από κάθε παράγραφο στην σελίδα μας θα υπάρχει μια μάυρη οριζόντια γραμμή. Η έκφραση “:after” απλά προσθέτει περιεχόμενο ακριβώς μετά από την επιλογή μας.

4. Ο επιλογέας “[title]“

a[title]{
color:#000;
text-decoration:underline;
}

Κάνοντας την παραπάνω επιλογή, θα διαλέξουμε όλα τα anchor tags στην σελίδα μας που περιέχουν το attribute “title” και θα τους δώσουμε μαύρο χρώμα και υπογράμμιση.

5. Ο επιλογέας “[href=]“

a[href="http://www.greektuts.net"] {
color: #5EB7CB;
text-decoration:underline;
}

Κάνοντας την παραπάνω επιλογή, θα επιλέξουμε όλους τους συνδέσμους(anchor tags) στην σελίδα μας που οδηγούν στο GreekTuts.net και θα τους δώσουμε γαλάζιο χρώμα και υπογράμμιση.

6. Ο επιλογέα “[href$=]“

a[href$=".jpg"]{
background: url(images/photo-icon.png) no-repeat scroll left center;
padding-left:15px;
}

Με την παραπάνω επιλογή, επιλέγουμε όλους τους συνδέσμους(anchor tags) στην σελίδα μας, που οδηγούν σε εικόνα ή έχουν κάπου μέσα στο href την κατάληξη .jpg, και θα προσθέσουμε ένα μικρό εικονίδιο δίπλα από το link. Προσοχή γιατί στο συγκεκριμένο παράδειγμα ψάχνουμε μόνο για συνδέσμους που οδηγούν σε εικόνες με κατάληξη .jpg. Για άλλους τύπους εικόνων πρέπει να γράψουμε άλλον επιλογέα.

7. Ο επιλογέας “:first-child”

#list ul li:first-child{
border-top:none;
}

Κάνοντας την παραπάνω επιλογή, επιλέγουμε τον πρώτο απόγονο από την unordered list. Δηλαδή αν μέσα στο “ul” υπάρχουν πολλά “li” και έχουμε βάλει να έχουν όλα border στην κορυφή, με την παραπάνω επιλογή φροντίζουμε το πρώτο “li” να μην έχει border στην κορυφή.

8. Ο επιλογέας “:last-child

#list ul li:last-child{
border-top:none;
}

Η παραπάνω επιλογή λειτουργεί ακριβώς όπως και το παράδειγμα 7, μόνο που εδώ επιλέγουμε μόνο το τελευταίο απόγονο.

9. Ο επιλογέας “>”

.menu > ul{
color:#fff;
}

H παραπάνω επιλογή λειτουργεί περίπου όπως και η επιλογή στο παράδειγμα 1, αλλά στην συγκεκριμένη περίπτωση επιλέγει μόνο όσα anchor tags είναι άμεσοι απόγονοι του div με class=”menu”. Αν δηλαδή έχουμε μέσα στο div μια unordered list με πολλά list items και κάποια από αυτά έχουν μέσα άλλα unordered lists, ο παραπάνω επιλογέας δε θα επιλέξει τα εμφωλευμένα “ul”.

10. Ο επιλογέας “*”

*{
margin:0;
padding:0;
}

Κλείνοντας ας δούμε έναν από τους πιο απλούς επιλογείς. Το “*” επιλέγει όλα τα στοιχεία στην σελίδα μας. Το συγκεκριμένο παράδειγμα επιλέγει όλη την σελίδα και βγάζει τα margins και τα paddings που μπορεί να βάζουν ως default οι διάφοροι browsers. Αυτό είναι επίσης γνωστό και ώς ένα πολύ απλό CSS Reset.