10 CSS Hacks and Tips You May Not Know
- 2 min read
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 Webkit based browsers like Safari and older versions of Chrome */
.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!
Divy Singh Rathore
September 16, 2015 at 3:37 pm
Awesome articles about CSS Selectors.