Witch cssnext, you can create your own selectors to make it easier to choose things like a group of elements with CSS.
- [Narrator] With CSSNext, you can use your own selectors to make life easier to choose things like a group of elements within CSS. So, let's take a look at how that works. Now, to do this, you declare a custom selector using the @ sign and then the key words, custom selector. Then inside that, you create a selector with whatever name you want using a colon and then two dashes and then the name of the selector. Then you access that selector via the name, just like you would with any other CSS selectors.
So, let's take a look at how that works. Within this root selector, I'm going to create a new custom selector. I just add the key word here, custom selector, and then I'm going to use a colon, and then the name of the selector, which I'm going to call headings. What this is going to do is allow me to pick all of my h1, h2, h3, h4, h5 and h6. Whenever I want to refer to those, all I have to do is use this headings custom selector.
Let's go ahead and save that. Then, when I go to my base.css document, I'm going to scroll all the way down, and then I'm going to find this section where I'm calling all of my headings, then I can just use the name of my custom selector, called headings. And, it's going to do the same thing that it did before. So, you can use this whenever you want to simplify the way that you call multiple selectors within CSS in any of your projects.
- Organizing your CSS into partials
- Creating variables
- Using custom selectors
- Working with flexbox layouts
- Setting up a mobile layout
- Making your features responsive
- Alternating layouts
- Adding animation
- Adding videos