CSS tutorial series: CSS functions part-1
Tags: webdev, beginners, css, tutorial
Published: 2023-02-01 06:27:08

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](https://dev.to/fullstackjo/css-tutorial-series-css-pseudo-classes-40j4) 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**.

```CSS
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`.

```HTML
<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>
```

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

![not pseudo-class function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mlm64t5dfkmysce3pa4t.png)

## 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`.

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

```

```CSS
a::after {
  content: attr(href);
}
```
In this example the content of the `href` attribute will be displayed after the link `Google`.
![attr() function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kjzjqeqry7z8vgmkhk99.png)

## 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.

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

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

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

![calc function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbt5uu05ksk3i2xm3a7w.png)

##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.

```CSS
.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.

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

```