css-where


Make your 𝐂𝐒𝐒 code more readable🧐 and less **repetitive** using the :where() function of CSS🤩

When we have to apply the same styles to multiple elements, the CSS code becomes repetitive😥. This repetition can be avoided using the :where() function.

The :where() function takes in a list of **selectors(HTML tags/classes/id's)** as an argument and applies the styles to all the selectors in one go🚀

# Passing arguments to the :where() function

---

```css
/* Passing Parameters to the where function*/
:where(header, main, footer) {
	/* Styling goes here */
}
```

Now let's take a look at how to actually use :where()

## Using the :where() function.

---

```css
header,
main,
footer {
	color: red;
	text-decoration: underline;
}

:where(header, main, footer) {
	color: red;
	text-decoration: underline;
}
```

As you can see, the styles of the links can be changed using any of the two approaches. And there isn't a major difference in both of these codes, the only difference being the use of :where() function.

But, now we will take a look at how you can use the :where() function effectively and avoid repetition.

Suppose you want to add the hover effect to the links🔗 inside of separate containers.
The traditional way is to select all the containers and add the hover🖱 effect separately.

But, using :where() function the code can be reduced.

## Adding hover effects using :where()

---

```css
/* Adding hover effect for the links*/

/* REPETITIVE CODE */
header a:hover,
main a:hover,
footer a:hover {
	color: red;
	text-decoration: underline;
}

/* LESS CODE USING WHERE FUNCTION */
/* Equivalent to the above code */
:where(header, main, footer) a:hover {
	color: red;
	text-decoration: underline;
}
```

This reduces the 𝐜𝐨𝐝𝐞👨‍💻 and makes it more 𝐫𝐞𝐚𝐝𝐚𝐛𝐥𝐞.

You can also make 𝐬𝐞𝐯𝐞𝐫𝐚𝐥 𝐜𝐨𝐦𝐛𝐢𝐧𝐚𝐭𝐢𝐨𝐧𝐬 and 𝐞𝐱𝐩𝐞𝐫𝐢𝐦𝐞𝐧𝐭🧪 more with the :where() function.

:where() function has 0
[specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity "With a Title").

## Conclusion

---

The CSS :where() pseudo-class function is very useful for improving code readability and styling the elements, and making our code easier to debug🐛

In this article📝, we have how to use the :where() function and it's use cases.


CSS :where() function


NextJS is a **framework for ReactJS**.

Wait a second ... a "framework" for React? Isn't React itself already a framework for JavaScript?

Well ... first of all, React is a "library" for JavaScript. That seems to be important for some people.

Not for me, but still, there is a valid point: React already is a framework / library for JavaScript. So it's already an extra layer on top of JS.

## Why would we then need NextJS?

Because NextJS makes building React apps easier - especially React apps that should have server-side rendering (though it does way more than just take care of that).

In this article, we'll dive into the core concepts and features NextJS has to offer:

- File-based Routing
- Built-in Page Pre-rendering
- Rich Data Fetching Capabilities
- Image Optimization
- Much More

# File-based Routing

![Create routes via your file + folder structure](/images/posts/next-js.png)

... More content ...


Getting Started with NextJS


JavaScript powers the web - it's **the** most important programming language you need to know as a web developer.

For example, you should understand code like this:

```js
const basics = 'Okay, that should not be too difficult actually';

function printBasics() {
  console.log(basics):
}

printBasics();
```

Learn more about it [here](https://academind.com).


Nishant Bhosale

I love creating content, building projects and solving problems!

Featured Articles

CSS :where() function

Getting Started with NextJS

Mastering JavaScript