Did you sometimes wonder, if there are more CSS things that you not know yet? Join me on a quick tour through 10 lesser-known CSS tricks that are about to become your secret weapons for leveling up your web design skills. Get ready to learn some new CSS tricks.
01. Smooth scrolling on your website
Add scroll-behavior: smooth to the <html> element to enable smooth scrolling for the whole page.
html{
scroll-behavior: smooth;
}
02. attribute selector for links
This selector targets links with href attributes starting with „https.“
a[href^="https"]{
color: blue;
}
03. ~ for combining siblings
Selects all <p> elements that are siblings following an <h2>.
h2 ~ p{
color: blue;
}
04. the :not() pseudo class
This selector applies styles to list items that do not have the class „special.“
li:not(.special){
font-stlye: italic;
}