title: :is() #pseudo_class
```css
/* Selects any paragraph inside a header, main
or footer element that is being hovered */
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}title: 2D-3D transform
```css
div { transform: rotate(20deg);}
div { transform: rotateY(150deg);}
title: Transitions
```css
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}title: CSS variables
To create a variable with local scope, declare it inside the selector that is going to use it.
```css
:root { --blue: #1e90ff;
--white: #ffffff;}
body { background-color: var(--blue); }title: Combinators
There are four different combinators in CSS:
- descendant selector (space)
- child selector (>)
- adjacent sibling selector (+)
- general sibling selector (~)Css pie chart
https://www.freecodecamp.org/news/css-only-pie-chart/- radial gradient- conic gradient- background: radial-gradient(circle at 50% 50%,ffffff, #000000);-