Difference between div~div and div:not(:first-of-type)?

Question

Is there a difference between div~div and div:not(:first-of-type)? Aside from IE6 whatever errors, are there cases where they would do different things?

Answer 1

In terms of matching elements, there is no difference. Any div that follows some other div within the same parent is, by necessity, not the first element of type div within its parent.

If the sibling selector were + and not ~, then div+div has the added condition that the following element must appear immediately after the preceding element. This is not the case with ~ — any number of siblings of any other kind may appear between the two.

If the pseudo-class were :first-child and not :first-of-type, then div:not(:first-child) will still match div:first-of-type if the first div within its parent is not its first child.

Here's an illustration:

<section>
    <div></div> <!-- div:first-child or div:first-of-type -->
    <div></div> <!-- div+div or div~div or div:nth-of-type(2) -->
    <p></p>
    <div></div> <!-- div+p+div or div~div or div:nth-of-type(3),
                     but not div+div -->
</section>
<section>
    <h1></h1>   <!-- h1:first-child -->
    <div></div> <!-- div:first-of-type or div:nth-child(2) -->
    <div></div> <!-- div~div or div:nth-of-type(2) or div:nth-child(3) -->
</section>

In terms of specificity, there is a difference. If you have CSS rules with both selectors matching the same elements, then div:not(:first-of-type) will take precedence due to the :first-of-type pseudo-class. Notice that the :not() itself is not counted — only its argument is considered.

Here's another illustration:

div {
    float: left;
    width: 50px;
    height: 50px;
    margin: 5px;
    border: 1px solid red;
}

/* 1 pseudo-class, 1 type -> specificity = 0-1-1 */
div:not(:first-of-type) {
    border-color: green;
}

/* 2 types                -> specificity = 0-0-2 */
div ~ div {
    border-color: blue;
}

<section>
    <div></div>
    <div></div>
    <div></div>
</section>