Subscirbe to Kodhus news letter and get new tips and tutorials right in your inbox by entering your email below

CSS Selectors 101

Kodhus >

The goal of this tutorial is not exactly what are basic CSS selectors are, but to describe some of the more advanced ones that are used in modern web design.

1. Difference between A > B and space (A B)

There has been always a question between > and space when selecting a dom element in css. So assuming that we have “A > B”, we basically select the Bs that are direct descendent of A where as in “A B” we select all the Bs that are children of A. Let’s take a look at an example. Imagine that we have the following html markup:

If we use the following selector:

The result will be:

Direct descendent
Panel’s child div

But if we use:

The result will be:

Direct descendent
Panel’s child div

2. Selecting using pseudo elements

2.1 :first-child, :last-child

These selector basically select the first child and the last child of the parent container. Let’s take a look at an example:

and css:

will result in:


Date: 2016-01-16

Here is the body text
2.2 :nth-child(n), :nth-of-type(n)

Here n represents a number telling which child in order from top, but the difference between nth-child and nth-of-type is that the former, selects the nth child regardless of the tag it has, while the nth-of-type selects nth child which has the same type as the element that we have applied this pseudo class to. So basically, if we have the following css:

It will not color our second div nor it colors second child which is the p to red. Because we have said to select the second child regardless of its tag type and yet we have said it should be a div. But if we do:

It will set the color of the second div with the content “Here is the body text”, red.

3. A + B

This selects any B element that is the next sibling of a A element meaning the next child of the same parent. Let’s take a look at an example:

and css:

This basically says that if our checkbox is checked, color the label to red.