10 css selectors you shouldn’t code without _ webdesigner depot

8/22/2019 10 CSS selectors you shouldnt code without _ Webdesigner Depot

1/5

8/7/13 10 CSS selectors you shouldnt code without | Webdesigner Depot

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

1 0 C S S s e l e c t o r s y o u s h o u l d n t

c o d e w i t h o u t

By Sara Vieira| Web Design | Aug 6, 2013 | 22 comments

TweetTweet 332 142

Every time we use CSS, we use selectors. But despite this, CSS selectors ar

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.

* {

margin:0;

padding:0;

ShareShare 16
http://www.webdesignerdepot.com/2013/08/10-css-selectors-you-shouldnt-code-without/#disqus_threadhttp://www.webdesignerdepot.com/category/web-design-3/http://www.webdesignerdepot.com/author/Sara-Vieirahttp://twitter.com/search?q=http%3A%2F%2Fwww.webdesignerdepot.com%2F2013%2F08%2F10-css-selectors-you-shouldnt-code-without%2Fhttps://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fwww.webdesignerdepot.com%2F2013%2F08%2F10-css-selectors-you-shouldnt-code-without%2F%3Fref%3Dfacebooksp&text=10%20CSS%20selectors%20you%20shouldn%E2%80%99t%20code%20without&tw_p=tweetbutton&url=http%3A%2F%2Fwww.webdesignerdepot.com%2F2013%2F08%2F10-css-selectors-you-shouldnt-code-without%2F&via=designerdepot


2/5



font-family: helvetica, arial, sans-serif;

font-size:16px;

}

A + B

This selector is called an adjacent selector and what it does is selects the element that is immediatel

after the first element. If you wanted to select the first div after our header you would type:

header + div {

margin-top:50px;

}

A > B

This selector will only select the direct children unlike A B that will select any level children ofA. Thi

selector is recommended for when you are working with first level children of a parent element. Fo

example if you want to select the first level list items in an unordered list that looks like this:

List Item With ul

Sub list item

Sub list item

Sub list item

List Item

List Item

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

nested unordered list


3/5



ul > li {

background: black;

color: white;

}

A [ h r e f * = " e x a m p l e " ]

This is a really good selector for when you want to style a particular link in a different way, whateve

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[href*="facebook"] {

color: blue;

}

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

A : n o t ( B )

This selector if particularly useful because of its negation clause that allows you to select any groupof elements that do not match what you place in B. If you want to select every div except the footer

you just need:

div:not(.footer) {

margin-bottom:40px;

}

A : f i r s t - c h i l d / A : l a s t - c h i l d

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 th

border in the first list item and the margin in the last list item you need:


4/5



ulli:first-child {

border: none;

}

ulli:last-child {

margin-right:0px;

}

A : n t h - c h i l d ( n )

The nth-child is a simple way for you to select any child of an element by its order. If for example yo

wanted the third list item in an unordered list this would be the way to go:

ulli:nth-child(3) {

background: #ccc;

}

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 : n t h - l a s t - c h i l d ( 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:

ulli:nth-last-child(2) {

background: #ccc;

}

A : n t h - o f - t y p e ( n )

This selector does exactly what you think it does; it sees what type of element you placed on it and i

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:


5/5



Sara Vieira is a freelance Web Designer and Developer with a passion for

HTML5/CSS3 and jQuery. You can follow her on or check out her

. by Sara Vieira

divp:nth-of-type(3) {

font-style: italic;

}

A : v i s i t e d

Ever noticed that when you search for something on google the pages you have already seen appea

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:visited {

color: blue;

}

F i n a l t h o u g h t s

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, via Shutterstock.

A b o u t t h e a u t h o r

code image

twitter

website More articles
http://www.webdesignerdepot.com/author/Sara-Vieirahttp://www.iamsaravieira.com/https://twitter.com/NikkitaFTWhttp://www.shutterstock.com/pic-131307065/stock-photo-program-code-on-a-monitor.html

10 css selectors you shouldn’t code without _ webdesigner depot

Documents