CSS Selectors You Should Be Using In 2023

February 17, 2023
coding frontend css css-selectors

background

Hello my fellow, developers! Just wanted to throw up a blog posts about some CSS selectors you should be using in your projects. Now, I know what you're thinking. "Selectors? Booooring." But trust me, these selectors will make your life easier and your projects look sleeker than a dolphin gliding through the ocean. Without further ado, here are three CSS selectors you should be using in 2023:

  1. The :not() selector:
    If you're like me, you sometimes find yourself staring at a page and wondering how to select everything except for that one pesky element. Enter the :not() selector. It's like a superhero who swoops in to save the day (or at least, save you some time). Just pop in the element you don't want to select, and voila! Everything else is fair game.
  2. The ::after and ::before selectors:
    These selectors are like the icing on the cake of your CSS. With them, you can add content before or after an element, without having to add an extra element to your HTML. Plus, they're easy to remember, because they're named after what they do. Think of them as the opposable thumbs of CSS selectors.
  3. The :nth-child() selector:
    You might have heard of this selector before, but let me tell you, it's still just as useful in 2023. With the :nth-child() selector, you can target specific children of an element, based on their position. It's like playing a game of CSS whack-a-mole, except instead of hitting moles, you're hitting specific elements with your styling.

Now, I know what you're thinking. "Wow, Aaron, these selectors sound great, but how can I remember them all?" Don't worry, I've got you covered. Just remember this handy acronym: NAA (pronounced "nahh"). It stands for Not, After, and Animate (which I didn't talk about, but it's still a cool selector). So there you have it, folks. Three CSS selectors you should be using in 2023. Just remember NAA, and you'll be on your way to CSS glory. And if you forget, just think of me and use Google, or of course you could book mark this post and come back to it for reference :) Happy coding!

Back to Blog