8/7/13

10 CSS selectors you shouldnt code without | Webdesigner Depot

10CSSselectorsyoushouldnt codewithout
By Sara Vieira | Web Design | Aug 6, 2013 | 22 comments
Tweet 332 142 Share 16

Every time we use CSS, we use selectors. But despite this, CSS selectors are one of the more neglected parts of the specification.
We talk about the big transformations in CSS3 but all too often forget the basics. Good use of selectors makes our day-to-day coding simpler and more elegant. Today Im going to cover the 10 selectors that often slip our minds, but are both effective and highly useful.

The * selector may be the one you remember most easily but its often underused. What it does is style everything on the page and its great for creating a reset and also for creating some page defaults like the font family and size you wish to have. *{ m a r g i n :0 ; p a d d i n g :0 ;
www.webdesignerdepot.com/2013/08/10-css-selectors-you-shouldnt-code-without/?ref=facebooksp 1/5

8/7/13

10 CSS selectors you shouldnt code without | Webdesigner Depot

f o n t f a m i l y :h e l v e t i c a ,a r i a l ,s a n s s e r i f ; f o n t s i z e :1 6 p x ; }

A+B

This selector is called an adjacent selector and what it does is selects the element that is immediately after the first element. If you wanted to select the first div after our header you would type: h e a d e r+d i v{ m a r g i n t o p :5 0 p x ; }

A>B

This selector will only select the direct children unlike A B that will select any level children of A. This selector is recommended for when you are working with first level children of a parent element. For example if you want to select the first level list items in an unordered list that looks like this: < u l > < l i > L i s tI t e mW i t hu l < u l > < l i > S u bl i s ti t e m < / l i > < l i > S u bl i s ti t e m < / l i > < l i > S u bl i s ti t e m < / l i > < / u l > < / l i > < l i > L i s tI t e m < / l i > < l i > L i s tI t e m < / l i > < / u l >

You would use this selector because the usual A B selector will also selected the list items inside the nested unordered list

www.webdesignerdepot.com/2013/08/10-css-selectors-you-shouldnt-code-without/?ref=facebooksp

2/5

8/7/13

10 CSS selectors you shouldnt code without | Webdesigner Depot

u l>l i{ b a c k g r o u n d :b l a c k ; c o l o r :w h i t e ; }

A[href*="example"]

This is a really good selector for when you want to style a particular link in a different way, whatever is in quotes will be matched against the href of the link. For example to style all links to facebook with the color blue you would use: a [ h r e f * = " f a c e b o o k " ]{ c o l o r :b l u e ; }

There is also a version without the * that matches the exact url that you can use for exact links.

A:not(B)

This selector if particularly useful because of its negation clause that allows you to select any group of elements that do not match what you place in B. If you want to select every div except the footer you just need: d i v : n o t ( . f o o t e r ){ m a r g i n b o t t o m :4 0 p x ; }

A:firstchild/A:lastchild

The first-child and last-child allow us to select the first and last child of the parent element. This can be a great help when it comes to list items and removing the margin-right or borders. To remove the border in the first list item and the margin in the last list item you need:

www.webdesignerdepot.com/2013/08/10-css-selectors-you-shouldnt-code-without/?ref=facebooksp

3/5

8/7/13

10 CSS selectors you shouldnt code without | Webdesigner Depot

u ll i : f i r s t c h i l d{ b o r d e r :n o n e ; } u ll i : l a s t c h i l d{ m a r g i n r i g h t :0 p x ; }

A:nthchild(n)

The nth-child is a simple way for you to select any child of an element by its order. If for example you wanted the third list item in an unordered list this would be the way to go: u ll i : n t h c h i l d ( 3 ){ b a c k g r o u n d :# c c c ; }

We can use nth-child to select every multiplier of a number by using the variable n , for example if we put 3n it would select the list item number 3, 6, 9, 12 and so forth.

A:nthlastchild(n)

The nth-last-child works like the nth-child but instead of counting form the first list item it starts counting from the last , so if you use it with the number two it will select the list item that comes before the last one and its usage is just like the nth-child selector: u ll i : n t h l a s t c h i l d ( 2 ){ b a c k g r o u n d :# c c c ; }

A:nthoftype(n)

This selector does exactly what you think it does; it sees what type of element you placed on it and it selects, for example, the third element on your page that matches what you typed. For selecting the third paragraph in a div you would use:
www.webdesignerdepot.com/2013/08/10-css-selectors-you-shouldnt-code-without/?ref=facebooksp 4/5

8/7/13

10 CSS selectors you shouldnt code without | Webdesigner Depot

d i vp : n t h o f t y p e ( 3 ){ f o n t s t y l e :i t a l i c ; }

A:visited

Ever noticed that when you search for something on google the pages you have already seen appear in a different color ? That is exactly what visited does. This is a great addition for the users but its sometimes forgotten and by my experience its comes in handy every time I search google. a : v i s i t e d{ c o l o r :b l u e ; }

Finalthoughts

In my experience using these kinds of selectors when coding can save us a lot of time and also avoid the need for a lot of IDs cluttering up our markup. And this is just the beginning of CSS selectors, there are plenty more selectors that are really handy but sometimes forgotten. Do you use CSS selectors in your style sheets? Is it easier to fall back on IDs and classes? Let us know in the comments. Featured image/thumbnail, code image via Shutterstock.

Abouttheauthor

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website . More articles by Sara Vieira

www.webdesignerdepot.com/2013/08/10-css-selectors-you-shouldnt-code-without/?ref=facebooksp

5/5