css-hacks-and-tips-thumb

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.

/* IE6 and below */
* html .my-class-goes-here {
    color:red;
}

/* IE 7 only */
*:first-child+html {
    color:blue;
}

5 Specific Input Types

You can style an input based on its type, for example text, email and password.

/* Text */
input[type="text"] {
    color:red;
}

/* Email */
input[type="email"] {
    color:blue;
}

/* Password */
input[type="password"] {
    color:green;
}

6 Chain Same-Selectors

By chaining the same selector together, you can override previous styles.

.my-class {
    color:red;
}

/* More Important */
.my-class.my-class {
    color:blue;
}

/* Even More Important */
.my-class.my-class.my-class {
    color:green;
}

7 Hide Empty Table Cells

It’s annoying when table styling gets weird because of empty cells, here’s how to hide them.

table {
    empty-cells: hide;
}

8 Select From Last Child

Any good CSS developer knows how to select elements with :nth-child, but did you know you can start from the end, instead of the beginning?

.my-class:nth-last-child(3) {
    background:red;
}

9 Customise Social Links

This is taken from the example above, but it means you can tailor your link colors to specific websites.

a[href*="twitter.com"] {
    color:#55acee;
}

a[href*="facebook.com"] {
    color:#3b5998;
}

a[href*="google.com"] {
    color:#db4437;
}

10 Perfectly Align to Center

By using transform:translate(); and position:absolute;, you can perfectly position something in the center of its parent.

.my-class-parent {
    position:relative;
}

/* I'm using -webkit- otherwise this won't work on Safari based browsers */
.my-class {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
}

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!

Follow IP on Twitter Like IP on Facebook

Advertisement