: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 linesunset. For example, background: unset and it’ll unset that style. Not supported in IE11 though*-of-type pseudo-class1p: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 Androidcolumn-fill: auto beaks responsive design as it requires setting a fixed height