Klassenselektoren
Baseline
Widely available
This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨Juli 2015â©.
Der CSS Klassenselektor stimmt mit Elementen basierend auf dem Inhalt ihres class-Attributs überein.
css
/* All elements with class="spacious" */
.spacious {
margin: 2em;
}
/* All <li> elements with class="spacious" */
li.spacious {
margin: 2em;
}
/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
margin: 2em;
}
Syntax
css
.class_name {
/* ⦠*/
}
Beachten Sie, dass dies dem folgenden Attributselektor entspricht:
css
[class~="class_name"] {
/* ⦠*/
}
Der Wert class_name muss ein gültiger CSS-Identifier sein. HTML-class-Attribute, die keine gültigen CSS-Identifier sind, müssen entkommt werden, bevor sie in Klassenselektoren verwendet werden können.
Beispiele
Gültige Klassenselektoren
HTML
html
<p class="red">This paragraph has red text.</p>
<p class="red yellow-bg">
This paragraph has red text and a yellow background.
</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>
html
<!-- The next two paragraphs have class attributes
that contain characters which must be escaped in CSS -->
<p class="item?one">This paragraph has a pink background.</p>
<p class="123item">This paragraph has a yellow background.</p>
CSS
css
.red {
color: #ff3333;
}
.yellow-bg {
background: #ffffaa;
}
.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #7777ff;
}
css
/* In the next two rules, the class attributes must be escaped */
.item\?one {
background-color: pink;
}
.\00003123item {
background-color: yellow;
}
Ergebnis
Ungültige Klassenselektoren
Die Klassenselektoren in den folgenden Regeln sind keine gültigen CSS-Identifier und werden ignoriert.
css
.item?one {
background-color: green;
}
.123item {
background-color: green;
}
Spezifikationen
| Specification |
|---|
| Selectors Level 4 # class-html |