Mike's PBX Cookbook

Some CSS Tricks

Just some simple CSS examples I want to remember 😊

▶ Tables

Odd/Even Rows:

tr:nth-child(odd) {background: #FFF} tr:nth-child(even) {background: #CCC}
bla blabla blabla blabla blabla blabla bla
bla blabla blabla blabla blabla blabla bla
bla blabla blabla blabla blabla blabla bla
bla blabla blabla blabla blabla blabla bla

Odd/Even Columns:

First yellow, then from 3, every second column grey:

td:first-child {background: #FF0} td:nth-child(2n+3) {background: #CCC}
bla blabla blabla blabla blabla blabla bla
bla blabla blabla blabla blabla blabla bla
bla blabla blabla blabla blabla blabla bla

Spacing/Padding:

▶ Lists

Ordered:

Space between list items with margin-bottom:

li {margin-bottom: 5px;} li::marker {font-weight: bold; color: red}
  1. bla bla
  2. bla bla
  3. bla bla
  4. bla bla

Un-ordered:

Unicode bullets: • = "\2022", ◦ = \25E6" and ▪ = "\25AA"

ul {list-style: none} li::before {display: inline-block; width: 1.2em; margin-left: -1em; content: "\2022"; color: red}

▶ HTML Symbols

▶ Table cells

Remove all styles for element: all: unset;

table.mytable td:nth-child(1) {width:220px;} table.mytable td:nth-child(2) {all:unset;}

Remove font style for element: font: unset;

table td:nth-child(1) {vertical-align: middle;} table td:nth-child(2) {font: unset;color:unset}

▶ Vertical text

.vertical {writing-mode: vertical-rl; text-orientation: sideways;} .upright {writing-mode: vertical-rl; text-orientation: upright;}

This is vertical This upright

▶ Light/Dark Image

led
<picture> <source srcset="dark.png" media="(prefers-color-scheme: dark)"> <img src="light.png"> </picture>

The first <source> element matching the media query is used.
The <img> tag is a fallback if no match is found.

▶ Light/Dark Div

dark
light
.light {display: block;} .dark {display: none;} @media (prefers-color-scheme: dark) { .light {display: none;} .dark {display: block;} } <div class="dark">dark <img src="dark.png"></div> <div class="light">light <img src="light.png"></div>

Fit background image to div

Scale background image to fit inside the div:

background-size: contain;

Scale background image to cover the whole div:

background-size: cover;