CSS selector :last-of-type not working if another div is included : <p>This is my HTML</p>

<pre><code>&lt;div id="funnel"&gt;
    &lt;div class="funnel_column_cont"&gt;This is a first div.&lt;/div&gt;
    &lt;div class="funnel_column_cont"&gt;This is a second div.&lt;/div&gt;
    &lt;div class="funnel_column_cont"&gt;This is a third div.&lt;/div&gt;
    &lt;div class="funnel_column_cont"&gt;This is a fourth div.&lt;/div&gt;
    &lt;div class="funnel_column_cont"&gt;This is a fifth div.&lt;/div&gt;
    &lt;div class="clr"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>This is my CSS</p>

<pre><code>&lt;style type="text/css"&gt;
#funnel .funnel_column_cont:last-of-type {
    background-color:red;
}
&lt;/style&gt;
</code></pre>

<p>I want to add background color red to the last div with class "funnel_column_cont". But when <code>&lt;div class="clr"&gt;&lt;/div&gt;</code> is included at the end in the HTML, then my CSS doesn't work.</p>

<p>If I remove this "clr" class div, then <code>:last-of-type</code> works as expected. Why? I don't understand because I have mentioned the class <code>.funnel_column_cont:last-of-type</code> in CSS. If I add some another HTML element like heading or paragraph, then :last-of-type still works. How to fix it?</p>
