Notes

Advanced CSS Tips

lesser-known css bits like the :empty pseudo-class, unset, the *-of-type selectors and multi-column layouts with columns

Edit on GitHub

CSS & Sass
CSS Flexbox cheatsheet
  • You can target empty elemets with :empty pseudo-class. Not empty elements can targeted with :not(:empty)
  • calc() and viewport units can give you a fully responsive deisgn in about 10 lines
  • You can reset values with unset. For example, background: unset and it’ll unset that style. Not supported in IE11 though

*-of-type pseudo-class

1p:first-of-type {} /* first paragraph element */
2img:last-of-type {} /* last image element */
3blockquote:only-of-type {} /* first blockquote element */
4article p:nth-of-type(odd) {} /* every odd element (1st, 3rd, 5th ..)*/
5article p:nth-of-type(3n) {} /* every 3rd pargraph element */
6article p:nth-of-type(4n+3) {} /* every 4th paragraph element starting at the third para*/

columns

 1nav {
 2	/*
 3	column-count: 4;
 4	column-wdith: 150px;
 5	*/
 6	columns: 4 150px; /* render up to 4 columns that are at least 150px wide */
 7	coumn-gap: 3rem /* gutter */
 8	column-rule: 1px dashed #ccc; /* the border between columns */
 9}
10
11nav h2 {
12	column-span: all /* take up all of the column width, break after */
13}
  • column-span isn’t supported in Firefox for Android
  • column-fill: auto beaks responsive design as it requires setting a fixed height

Related

Browse all topics