CSS tutorial series: CSS functions part-1

Up until now, we've seen functions such as var(), url(), rgb(). CSS has a variety of built-in functions which we will discuss in this post.

What is a function?

A function is a block of code that can be reused to execute a specific task. The function has a name which allows you to call that function and pass data to it. The data passed to the function is known as arguments.

Let's take an example and look at some pseudo-classes we might not have previously mentioned in the CSS tutorial series: pseudo-classes lesson.

:is()

This pseudo-class function accepts a selector list as argument and selects each element in that list. Pseudo-elements are not valid arguments for this function.

element:is(selector1, selector2, ...){
  property: value;
}

The styles will be applied to the elements that match whichever selector provided in the argument list.

:not()

Unlike :is(), :not() pseudo-class function excludes a specific element which is passed as an argument to this function. In other word this function will match the selector that was passed as argument and not apply styles to it.

For example, let's say we want all the paragraphs' color to be red but not the one with the class of .last.

<p>Lorem ipsum dolor sit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, debitis!</p>
<p>Lorem ipsum dolor sit amet consectetur.</p>
<p class="last">Lorem ipsum dolor sit amet.</p>

p:not(.last){
  color: red;
}

attr()

Some functions return a value after passing one more arguments to them.

This function is used to retrieve an attribute of an HTML element. For example, the href attribute of an anchor tag <a>. This is done using the pseudo elements ::before and ::after.

<a href="www.google.com">Google</a>

a::after {
  content: attr(href);
}

In this example the content of the href attribute will be displayed after the link Google.

calc()

This function carries out calculations by accepting a mathematical expression of different types of length units returns a value which will be used a property value.

<div class="one"><p>This is a text</p></div>

.one  {
  height: 20vh;
  background-color: red;
  text-align: center;
}

.one p {
  padding: 2rem 0;
  width: calc(100vw - 80%);
  background-color: green;
  margin: 0 auto;
}

clamp()

This function takes 3 arguments, the minimum value, the preferred value and the maximum value.
clamp() will take the preferred value into account as long as it stays within the minimum and maximum limits.

By using clamp(), we can create components whose size will scale with the size of the viewport but won't go below or above the specified sizes.

.wrapper {
  width: clamp(320px, 80%, 1200px);
}

In the example above, clamp() will take into account the 80% making sure that the the wrapper scales within the range of 320px and 1200px.

min() and max()

With these functions, you can choose the highest or lowest value from a range of values you give. These functions make it possible to make things responsive up until a specific point, much like clamp().

These functions take multiple arguments, the min() function returns the smallest computed value of those arguments and the max() function returns the largest.

.element {
  width: min(10vw, 20rem);
  height: max(40vh, 50rem);
}