CSS Class Selector Explanation

Ο επιλογέας κλάσης επιτρέπει να καθορίσετε το στυλ ανεξάρτητα από τα στοιχεία του έγγραφου.

CSS Class Selector

Ο επιλογέας κλάσης επιτρέπει να καθορίσετε το στυλ ανεξάρτητα από τα στοιχεία του έγγραφου.

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

Συμβουλή:Μόνο αφού σημειωθεί σωστά το έγγραφο, μπορείτε να χρησιμοποιήσετε αυτούς τους επιλογείς, οπότε η χρήση αυτών των επιλογέων απαιτεί συνήθως κάποιες σκέψεις και σχεδιασμό.

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

Τροποποίηση κώδικα HTML

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

Για να συνδέσετε το στυλ του επιλογέα κλάσης με το στοιχείο, πρέπει να ορίσετε την κλάση με μια κατάλληλη τιμή. Δείτε τον παρακάτω κώδικα HTML:

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

Στο παραπάνω κώδικα, οι κλάσεις των δύο στοιχείων έχουν οριστεί ως important: ο πρώτος τίτλος (έλεμα h1), ο δεύτερος παράγραφος (έλεμα p).

Syntax

Then we use the following syntax to apply styles to these categorized elements, that is, a point (.) before the class name, then combined with a wildcard selector:

*.important {color:red;}

If you only want to select elements with the same class name, you can ignore the wildcard selector in the class selector, which has no negative effect:

.important {color:red;}

Try It Yourself

Combined with element selector

Class selectors can be combined with element selectors.

For example, you may want only paragraphs to be displayed in red text:

p.important {color:red;}

The selector now matches all p elements with the class attribute containing important, but does not match any other type of element, regardless of whether it has this class attribute. The selector p.important is interpreted as: "All paragraphs whose class attribute is important." Since the h1 element is not a paragraph, the selector does not match it, so the h1 element will not become red text.

If you indeed want to specify a different style for the h1 element, you can use the selector h1.important:

p.important {color:red;}
h1.important {color:blue;}

Try It Yourself

CSS multi-class selector

In the previous section, we dealt with the case where a class value contains a single word. In HTML, a class value may contain a list of words separated by spaces. For example, if you want to mark a specific element as both important (important) and warning (warning), you can write:

<p class="important warning">
This paragraph is a very important warning.
</p>

The order of these two words is not important, it can also be written as warning important.

We assume that all elements with class important are bold, and all elements with class warning are italic, and all elements with both important and warning have a silver background. It can be written as:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

Try It Yourself

By linking two class selectors together, onlyContaining these class names at the same timeelements (the order of class names is not limited).

If a multiple class selector contains a class name that is not in the class name list, the match will fail. Please see the following rules:

.important.urgent {background:silver;}

As expected, this selector will only match p elements that contain the words important and urgent in the class attribute. Therefore, if a p element's class attribute only contains the words important and warning, it will not match. However, it can match the following elements:

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

Try It Yourself

Important Note:Before IE7, different platforms' Internet Explorer could not correctly handle multiple class selectors.