# Everytime we touch – I get this feeling 🥵 – Cascada
## intro Worum geht es denn jetzt eigentlich?
## $ whoami_ Andreas Kottre co-founder & dev bei [@typedigital_](twitter.com/typedigital_) - Twitter: [@timidak_](twitter.com/timidak_) - GitHub: [@timidak](github.com/timidak)
## Was ist Cascade? 🧐
- Selector specifity (Scoring) - Style order
## Selector specifity
### Selector specifity - Score: 0 0 0 0 0 - ! - Inline Style - ID - Class/Attribute/Pseudoclass - Element/Pseudo - Beispiel: 0 0 1 2 1 ```css p { font-size: 14pt; } p.my-class { font-size: 20pt; } p#my-id { font-size: 22pt; } ```
### auflösung ```css p { font-size: 14pt; } /* 00001 */ p.my-class { font-size: 20pt; } /* 00011 */ p#my-id { font-size: 22pt; } /* 00101 */ ```
### jetzt ein üblicheres Beispiel ```css #nav .removed > a:hover { color: coral } ```
### auflösung - !important -> 1 - Inline Style -> 0 - id: nav -> 1 - class: remove & pseudoclass: hover -> 2 - elemnt: a -> 1 ```css #nav .removed > a:hover { color: coral !important } /* 10121 */ ```
## Style order
### ein Besipel zur Style-Reihenfolge ```css p.my-class { color: blue; } /* selector specifity 00011 */ p.my-class { color: red; } /* selector specifity 00011 */ ```
### auflösung ```css p.my-class { color: blue; } p.my-class { color: red; } /* <-- winner */ ```