Intro
Finding good CSS selectors to style elements can seem a bit magical for new web developers. In this video, I’ll show you some of the tricks I use to find the best selectors for styling when I don’t have control of the markup.
Tools
Codepen- I’m using Codepen here because it’s really quick to write some CSS and see the outcome. If you want to play along, I’ll link to the starting pen I created in this blog post so you can start from the same point as I am. Just go to that link, click “Fork,” and create a Codepen account to start with your own fresh copy.
Starting point
In a lot of cases, you’ll be able to change the markup however you want, but I find a lot of new developers work with existing WordPress themes where that isn’t so easy. I’m starting with a pretty basic HTML page here. It’s got some basic styling, and I added a few placeholder images and some placeholder text quoted from Arrested Development to make it a little more fun.
Navigation
The first thing I want to do is lay out my navigation horizontally and move it to the right.
Show dev tools and how to find the element and find good selectors. We want the least complex selector that is specific enough to catch only the elements we want. Show how to test your selectors to see which elements they apply to, both by prototyping styles in dev tools and by using document.querySelectorAll.
wrong selectors:
li {
display: inline;
margin-left: 0.5em;
}
ul {
position: absolute;
top: 0;
right: 1em;
}
a {
color: white;
text-decoration: none;
}
right selectors:
nav li {
display: inline;
margin-left: 0.5em;
}
nav ul {
position: absolute;
top: 0;
right: 1em;
}
nav a {
color: white;
text-decoration: none;
}
Paragraph image
Let’s align this first image to the left of the text.
wrong selector:
img {
float: left
}
fix:
Different ways to approach. We have other images right now that we don’t want floated left: logo and gallery. We want to think not just about the elements that are on the page right now but about what’s going to be on the page later. Are we going to have other images, and will we want those to be left-aligned? If so,
header img, .gallery img {
float: none;
}
If this is the only image we want floated left, we can try another way to single it out. Is it floated left because it’s an image in the first section of main?
main section:first-of-type img {
float: left;
}
and
h1, h2, h3, h4, h5, h6 {
clear: both;
}
Gallery
For the gallery, I want a 2x2 grid of images. To do that, I’ll want each image to be 50% of the available width. Let’s find a selector that will select only our gallery images.
wrong selector:
img {
width: 50%;
}
fix:
.gallery img {
width: 50%;
}
I want to fix this little gap between the images. The reason this happens is that the images, by default, have a display property of inline which makes them act just like text. That means, spaces in your markup translate to spaces on the page and line breaks are affected by the line height. Need to eliminate those spaces between and change the line height of the images’ container.
.gallery {
line-height: 0;
}
Footer
This page has a ton of links in the footer, divided into three separate lists. I want to take those and lay them out horizontally in three columns. I could do this several different ways, but I’m going to use flexbox. Now, to find a good selector.
footer {
display: flex;
justify-content: center;
}
footer ul {
list-style-type: none;
}
footer a {
color: lightgray;
text-decoration: none;
}
Conclusion
Our page is looking a lot better, but, more importantly, we’ve learned how to find the right selectors when we don’t control our page markup. Just remember to find the least specific selector that selects only the elements you need.