10 CSS Hacks and Tips You May Not Know

Although CSS is a simple language when compared to something like PHP, it’s also incredibly powerful. I like to think of it like an ant, although it can’t lift a car, it can lift the equivalent of a car for its size.

Below I’ve gathered a bunch of CSS tricks I use on a daily basis, as well as some I’ve only discovered from putting this list together. If you’ve got any CSS hacks and/or tips, I’d love to see you share them in the comments below!

1.) Selector Starts with…

You can apply styling to any selector that starts with a specific string of text.

[class^="my-class-"] {
color:red;
}

2.) Selector Ends with…

You can apply styling to any selector that ends with a specific string of text.

[class$="-goes-here"] {
color:red;
}

3.) Selector Contains

You can apply styling to any selector that contains a specific string of text.

[class*="class"] {
color:red;
}

4.) Just IE

Need to apply some styles to IE, but don’t want to create a separate stylesheet? This one’s for you.

As you can see from above, there are loads of CSS hacks and tips that can be used to manipulate the design of your site in any way you choose. The real trick is knowing when to keep it simple.

Although the above tricks are handy, relying on them constantly can make your CSS files unreadable to anyone other than yourself. A good rule of them is to keep your CSS easily readable to anyone jumping into the project right now.

If you’d got any CSS hacks and/or tips, please share them in the comments!