CSS Pseudo

class.md

EXAMPLE

button:hover{
  color: purple;
}

button:focus{
  color: green;
}

button:disables{
  background: gray;
}

li:first-child {
  font-size: 3rem;
}

li:last-child {
  font-size: 3rem;
}

// first-of-type last-of-type

li:nth-child(2){
}

li:nth-child(odd | even) {
}

li:nth-child(3n) {
// 3rd, 6th, 9th
}

li:not(:hover) {
  text-decoration: line-through;
  color: orangered;
}

.dropdown:focus-within {}

<p lang="es">hola!</p>

p:lang(...) {}

p:lang(de):nth-of-type(3n){
  color:gold;
}

element.md

CSS Pseudo Element

• ::Element(not class)

input::placeholder {
  color: hotpink
}
// or ::after ::before
// is an actual part of dom

• :Class (current state)

input:focus {
}

EXAMPLE

p::first-letter {
  font-size:5rem;
}

li::before {
  content: "🤡";
}

::selection {
  background: black;
  color: red
}

::-WEBKIT-SCROLLBAR