CSS Advanced Layout Tips

Using: Empty to distinguish between null elements

Compatibility: IE8 not supported

If we have the above list:

<div class= "Item" >a</div><div class= "item" >b</div><div class= "item" ></div>

We want to be able to distinguish between empty elements and non-empty elements, so there are two scenarios.

To select an empty element with: empty:

. item:empty {  display:none;}

Or select a non-empty element with: not (: empty):

. Item:not (: Empty) {  border:1px solid #ccc;  /* ... */}

Select elements with:*-of-type

Compatibility: IE8 not supported

An example is described.

Add a bold paragraph to the first P:

P:first-of-type {  font-weight:bold;}

Add a border to the last img:

Img:last-of-type {  border:10px solid #ccc;}

To add a blockquote to a non-connected style:

Blockquote:only-of-type {  border-left:5px solid #ccc;  Padding-left:2em;}

Let the odd sequence of P-paragraph first die red:

P:nth-of-type (even) {  color:red;}

In addition,: Nth-of-type can also have other types of parameters:

*/Even number of * *
: Nth-of-type (even)

/* Only a third */
: Nth-of-type (3)

/* Every third */
: Nth-of-type (3n)

/* Every fourth plus three, i.e. 3, 7, 11, ... */
: Nth-of-type (4n+3)

Flow Layout with Calc

Compatibility: IE8 not supported

Flow layout in left-right:

Nav {  position:fixed;  left:0;  top:0;  Width:5rem;  height:100%;} aside {  position:fixed;  right:0;  top:0;  Width:20rem;  height:100%;} Main {  margin-left:5rem;  Width:calc (100%-25rem);}

Full-screen scrolling effect with VW and VH

Compatibility: IE8 not supported

VW and VH are relative to viewport, so they do not change with the content and layout.

section {  width:100vw;  HEIGHT:100VH;  Display:flex;  Align-items:center;  Justify-content:center;  Text-align:center;  Background-size:cover;  Background-repeat:no-repeat;  background-attachment:fixed;} Section:nth-of-type (1) {  background-image:url (' https://unsplash.it/1024/683?image=1068 ');} Section:nth-of-type (2) {  background-image:url (' https://unsplash.it/1024/683?image=1073 ');} Section:nth-of-type (3) {  background-image:url (' https://unsplash.it/1024/683?image=1047 ');} Section:nth-of-type (4) {  background-image:url (' https://unsplash.it/1024/683?image=1032 ');} body {  margin:0;} p {  color: #fff;  font-size:100px;  Font-family:monospace;}

Make CSS Reset with unset

Compatibility: IE not supported

body {  color:red;} button {  color:white;  border:1px solid #ccc;} /* Cancels the color setting of the button in section */section button {  color:unset;}

Column layout using column as the response type

Compatibility: IE9 not supported

Nav {  column-count:4;  column-width:150px;  Column-gap:3rem;  column-rule:1px dashed #ccc;  Column-fill:auto;} h2 {  Column-span:all;}