|
| 1 | +--- |
| 2 | +name: Spezifizität |
| 3 | +lang: de |
| 4 | +--- |
| 5 | + |
| 6 | +# Spezifizität in CSS |
| 7 | + |
| 8 | +In CSS gibt es ein Konzept namens "Spezifizität", das bestimmt, welche Regeln angewendet werden, wenn mehrere Regeln auf dasselbe Element zutreffen. Die Spezifizität wird durch die Kombination von Selektoren in einer Regel bestimmt. Hier sind einige Beispiele: |
| 9 | + |
| 10 | +:::webide{id="spezifizitaet"} |
| 11 | + |
| 12 | +```css |
| 13 | +body { |
| 14 | + color: red; |
| 15 | +} |
| 16 | + |
| 17 | +body h1 { |
| 18 | + color: green; |
| 19 | +} |
| 20 | + |
| 21 | +h1 { |
| 22 | + color: blue; |
| 23 | +} |
| 24 | +``` |
| 25 | + |
| 26 | +```html template |
| 27 | +<!DOCTYPE html> |
| 28 | +<html> |
| 29 | + <head> |
| 30 | + <title>Spezifizität</title> |
| 31 | + <style> |
| 32 | + ###CSS### |
| 33 | + </style> |
| 34 | + </head> |
| 35 | + <body> |
| 36 | + <h1>Überschrift</h1> |
| 37 | + <p>Text</p> |
| 38 | + </body> |
| 39 | +</html> |
| 40 | +``` |
| 41 | +
|
| 42 | +::: |
| 43 | +
|
| 44 | +In diesem Beispiel wird die Farbe des `h1`-Elements auf Grün gesetzt, da die zweite Regel die spezifischste Regel ist. Das heißt, dass diese Regel am genauesten auf das Element zutrifft und daher angewendet wird. |
| 45 | +
|
| 46 | +Die Spezifizität kann durch das Hinzufügen eines `!important` außer Kraft gesetzt werden. Das `!important`-Flag überschreibt alle anderen Regeln, unabhängig von ihrer Spezifizität. Hier ist ein Beispiel: |
| 47 | +
|
| 48 | +:::webide{id="spezifizitaet-important"} |
| 49 | +
|
| 50 | +```css |
| 51 | +body { |
| 52 | + color: red; |
| 53 | +} |
| 54 | +
|
| 55 | +body h1 { |
| 56 | + color: green; |
| 57 | +} |
| 58 | +
|
| 59 | +h1 { |
| 60 | + color: blue!important; |
| 61 | +} |
| 62 | +``` |
| 63 | +
|
| 64 | +```html template |
| 65 | +<!DOCTYPE html> |
| 66 | +<html> |
| 67 | + <head> |
| 68 | + <title>Spezifizität</title> |
| 69 | + <style> |
| 70 | + ###CSS### |
| 71 | + </style> |
| 72 | + </head> |
| 73 | + <body> |
| 74 | + <h1>Überschrift</h1> |
| 75 | + <p>Text</p> |
| 76 | + </body> |
| 77 | +</html> |
| 78 | +``` |
| 79 | +
|
| 80 | +::: |
| 81 | +
|
| 82 | +:::alert{warn} |
| 83 | +`!important` sollte sparsam eingesetzt werden, da es die Lesbarkeit und Wartbarkeit des Codes beeinträchtigen kann. |
| 84 | +::: |
| 85 | +
|
| 86 | +
|
| 87 | +## Berechnung der Spezifizität |
| 88 | +
|
| 89 | +Die Berechnung der Spezifizität erfolgt durch die Zählung der verschiedenen Selektoren in einer Regel. Hier sind die Regeln für die Berechnung der Spezifizität in Anlehnung an das [W3C-Spezifikation](https://www.w3.org/TR/selectors-3/#specificity): |
| 90 | +
|
| 91 | +- HTML-Elemente (z.b. h1, p, blockquote ) = 1 Punkt |
| 92 | +- CSS-Klassen (z.B. .alert, .js) = 10 Punkte |
| 93 | +- Pseudo-Klassen/Elemente (z.B. :nth-of-type) = 10 Punkte |
| 94 | +- CSS-IDs (z.B. #container, #header) = 100 Punkte |
| 95 | +- Inline-Styles (z.B. <h1 style="color: red;"></h1>) = 1000 Punkte |
| 96 | +- !important gewinnt immer, es sei denn mehere Selektoren haben ein !important erhalten. |
| 97 | +
|
| 98 | +Hier ein Beispiel: |
| 99 | +
|
| 100 | +```css |
| 101 | +/* Regel 1 */ |
| 102 | +body { |
| 103 | + color: red; |
| 104 | +} |
| 105 | +
|
| 106 | +/* Regel 2 */ |
| 107 | +ul.nav li.active { |
| 108 | + color: green; |
| 109 | +} |
| 110 | +
|
| 111 | +/* Regel 3 */ |
| 112 | +#header h1 { |
| 113 | + color: blue; |
| 114 | +} |
| 115 | +``` |
| 116 | +
|
| 117 | +Hier die Berechnung der Spezifizität für jede Regel: |
| 118 | +
|
| 119 | +- Regel 1: 1 Punkt (1 Element) |
| 120 | +- Regel 2: 12 Punkte (1 Element + 2 Klassen) |
| 121 | +- Regel 3: 101 Punkte (1 ID + 1 Element) |
0 commit comments