Member-only story
Peeling back a layer of CSS pseudo-classes and pseudo-elements
Have you ever felt like you’re only scratching the surface when it comes to CSS pseudo-elements and pseudo-classes? The rabbit hole runs deep for these but there are three lesser-known pseudo-classes that can simplify common problems. The best part is you can get results with just a few lines of code.
Before we dive into the specifics, if you’re new here, I’m Jaylan and I try my best to educate others on topics in a simple and quick format. If you enjoy what I have here please give this a clap and a follow! Today, I’m excited to share a few more CSS tricks that can help out in your projects.
:target pseudo-class
It’s easy to lose track of where you are on the page. This is where the :target pseudo-class comes into play.
Wrap each section in an element with a class, for instance, .section. When a section becomes the target (usually through clicking on a link that sets the URL hash), you can apply styles to highlight it. For example:
.section:target {
outline: 3px dotted red;
}This CSS code outlines the targeted section, making it visually distinct when you navigate through the page. You can take this a step further by targeting specific child elements within the section, allowing for more granular…
