Advanced Css Selectors 101 - Kodhus

Advanced Css Selectors 101

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

CSS Selectors

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:

<div class="container">
      <div class="btn">Direct descendent</div>
      <div class="panel">
          <div class="btn">Panel's child div</div>
      </div>
  </div>

If we use the following selector:


  div.container > div.btn {
    background-color: red;
  }

The result will be:

Direct descendent
Panel’s child div

But if we use:

div.container  div.btn {
    background-color: red;
  }

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:

<div class="container">
      <div>Title</div>
      <p>Date: 2016-01-16</p>
      <div>Here is the body text</div>
      <div>Sub</div>
  </div>

and css:

.container div:first-child {
      color: green;
  }
  .container div:last-child {
      color: red;
  }

will result in:

Title

Date: 2016-01-16

Here is the body text
Sub
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:

.container div:nth-child(2) {
      color: red;
  }

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:

.container div:nth-of-type(2) {
      color: red;
  }

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:

<div class="container">
      <input type="checkbox" id="checkbox1" selected>
      <label for="checbox1">Our input</label>
  </div>

and css:

#checkbox1:checked + label {
      color: red;
  }

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

Share if you liked it: Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *

Share
Tweet
+1
Share