hello@designbypelling.co.uk
Design by Pelling
01252 341 730

Archived Blog 

A Few CSS Tricks & Tips

Setting the border-box property to “content-box” will simply mean that if you create a 500px by 500px wide box and then apply 40px of padding to it, the actual width of the box will increase to 580px, due to the padding changing the width. The padding will be applied to the outside of the element, and therefore will change the width.

Changing this value to “border-box” will mean that you can set the padding on an element without affecting the width of the element, the padding will simply be applied to the inside of the element without changing the width.

Just to recap…

content-box: Total Width = Element Width + Padding-left + Padding-right + Border-left + Border-right.

border-box: Total Width = Element Width

So the default value of “content-box” can actually be quite a frustrating property to use, especially when using percentages or even pixels as well, mixed units will make calculating the actual width of the element quite tricky!

Using “border-box” will add the padding & border to the inside of the box, meaning that the width will remain at the value you set, regardless of the size of the padding or border.

Be sure to remember that at the moment you will not be able to use the box-sizing property unless you add the vendor specific prefixes to ensure that each different browser will be able to render the property.

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

Hopefully, sometime soon, all browsers will catch up & will actually work just based on the property alone, without the vendor specific prefixes. In the meantime you can just use less mixins, or AutoFixer.

Nth Child

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent. “n” can be a number, a keyword, or a formula.

The :nth-child(n) selector allows us quite a lot of flexibility when selecting elements. The “n” argument, can be a keyword, a number, or a number expression.

Some Useful Nth Child Rules.

  • p:nth-child(odd) This will select every odd paragraph.
  • p:nth-child(even) This will select every even paragraph.
  • p:nth-child(4) This will select only the fourth element.
  • p:first-child This will select the first child.
  • p:last-child This will select the last element.
  • p:last-child(2) This will select the second to last element.
  • p:nth-child(-n+5) This will select only the first 5 elements.
  • p:nth-child(n+6) This will select every element except for the first five.
  • p:nth-child(4n-7) Starting at the first element, this will select every fourth element.

From a backend developers point of view, the nth-child is a very useful property to have to hand. If you have a line of boxes, each with a right margin, and you want the last box to have no margin you would have to add a class to the last box, then apply CSS to the last class making it remove the margin right. Depending on what system the developer is using to add the class to the last element, it can sometimes be tricky to generate the last class.

Using the nth-child, there is no need to add classes to first or last elements. You can simply use the nth child to target any HTML element you want.

So to recap…

N as a number: When N is a number, this will select the child element that is in that position within the document tree. So if you set N to 3 then the third element will be targeted.

N as a Keyword: As a keyword, this accepts two values, Odd & Even. Pretty self explanitory?

N as an Expression:

Expressions allow you to use the full flexibility of this property.

  • every fourth element
  • every fifth element
  • every other element starting with the 6th one

The expression is in the form an+b where a and b are integers. For example :nth-child(3n+2)

The first part of the expression (an) tells the browser how many elements to skip before applying the style again.

  • 1n – selects every element
  • 2n – selects every other element (and is the same as the keyword even)
  • 3n – selects every third element
  • 20n – selects every twentieth element
  • and so on…

The second part of the expression (b) tells the browser which element to start with.

  • 2n+1 – starts at the first element
  • 2n+2 – starts at the second element
  • 2n+3 – starts at the third element
  • 2n+20 – starts at the twentieth element

How to Build an Expression

  1. Decide how many elements you want to skip between selections. This is a
  2. Decide which element you want to start your selections with. This is b
  3. Place your a and b in the expression :nth-child(an+b)

I’ll be very happy if this article can provide you with some insight into a few of CSS3’s awesome features. Be sure to try some of this out yourself, the examples here are very basic, there is so much more you can do with CSS3. Watch this space for more!

Want to hire us? We'd love to hear from you

Pelling have over 50 years combined experience designing and coding websites. We work with companies of all sizes, from one-man bands to multinational blue chip companies. We endeavour to provide high quality service, while maintaining a competitive price.

We pride ourselves in our level of customer service, which we believe is the main reason behind our high customer retention rates.