Here I keep some cool snippets that I use alot but often forget.
CSS: Make child element break out of parent container
.container .innerContainer:nth-child(2) {
box-shadow: 0 0 0 100vmax #000000;
clip-path: inset(0 -100vmax);
background-color: #000000;
color: white;
}
CSS: Grid and min max width in CSS
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
CSS: Apply styles to every fourth paragraph except the last one
p:nth-of-type(4n + 1):not(:last-of-type) {
font-weight: bold;
}
CSS: Apply styles to every second to third div
.container div:nth-of-type(n + 2):nth-of-type(-1n + 3) {
background-color: red;
}
CSS: Margin block auto
.container {
display: flex;
}
.container div:nth-child(2) {
margin-block-start: auto;
}