CSS

CSS Hover Effect with Grayscale and Zoom

Font Awesome – Chevron Right

.chevron li{
     position: relative;
     list-style: none !important;
     margin: 0 !important;
     border-bottom: 1px solid rgba(255,255,255,.2);
     margin-bottom: 4px !important;
 }
 .chevron li::before{
     position: absolute;
     content: '\f054' !important;
     font-family: 'Font Awesome 5 Free';
     left: -25px;
     font-weight: 900;
 }

How to add stickey footer with CSS

Wrap all content right above the footer element, set the min-height calc function to 100% of viewport height minus the footer height:

.wrap{
     min-height: calc(100vh - 100px);
 }

CSS Display the title attribute with ::after pseudo selector

Title attribute

a::after {
   content: attr(title);
   display: inline-block;
   color: initial;
   font-size: .65em;
   margin-left: 5px;
 }

Href attribute

a::after {
   content: attr(href);
   display: inline-block;
   color: initial;
   font-size: .65em;
   margin-left: 5px;
 }

CSS Select the first line and first letter

.intro:first-line{
     font-weight: bold;
 }
 .intro:first-letter{
     font-size: 80px;
     color: tomato;
 }

CSS Select every element except the first or last child

Select every element except the first-child

li:not(:first-child){ }

Select every element except the last-child

li:not(:first-child){ }

CSS Selector :root / :target

Selects the root element of the document in the case of HTML

:root { background: yellow; }

Selects an element with an ID matching the current URL’s fragment

:target { border: 2px solid black; }

CSS Select the 4th then every 3th element

img{
     float: left;
 }
 img:nth-child(3n+4){
     clear:left;
     border-color: tomato;
 }

CSS Selector – div:nth-of-type

Select the 4th element of one specific type

div:nth-of-type(4){ }

CSS Select every 2nd, 3rd element – even / odd

Select every 2nd element

li:nth-child(even){ }
li:nth-child(odd){ }

Select every 3rd element

li:nth-child(3n){ }