Hide the first div with specific class

Question

I want to hide (display:none) the first div with class .leftAddress

Here is css

fieldset .leftAddress:first-of-type{
    display:none;
}

Here is html

<fieldset>
    <div class="alert forward"><span class="coming"><strong>NOTE:</strong></span> A maximum of 5 address book entries allowed.</div>
    <div class="leftAddress">Any</div>
    <div class="leftAddress"> 
        <!--Insert-->
        <h3 class="addressBookDefaultName">Harry Testing</h3>
    </div>
    <div class="leftAddress"> 
        <!--Insert-->
        <h3 class="addressBookDefaultName">Heba ElZany</h3>
    </div>
    <div class="leftAddress"> 
        <!--Insert-->
        <h3 class="addressBookDefaultName">Yamen Shahin&nbsp;(primary address)</h3>
    </div>
    <div class="leftAddress"> 
        <!--Insert-->
        <h3 class="addressBookDefaultName">Yamen2 Shahin2</h3>
    </div>
    <div class="leftAddress"> 
        <!--Insert-->
        <h3 class="addressBookDefaultName">Yamen3 Shahin3</h3>
    </div>
</fieldset>

As you see I used :first-of-type, but it seems to be not working. What am I missing here? I also tried :nth-of-type(1) http://jsfiddle.net/arns7/4/ it doesn't work. So this solution didn't work for me CSS selector for first element with class

`first-of-type` is applicable for elements and not classes. CSS doesn't have a `first-of-class` kind of selector. — Harry, Aug 02 '14 at 12:14

score 7 · Accepted Answer · edited May 23 '17 at 12:09

CSS Based Solution:

With CSS, there is no direct way to do this as far as I am aware. However, you can do the below as a work-around solution.

fieldset .leftAddress {
    display:none;
}
fieldset .leftAddress ~ .leftAddress {
    display: block;
}

Explanation: The first rule sets the display as none for all elements with .leftAddress class under the fieldset and then the second one sets display to block for all elements with .leftAddress class which also has a preceeding sibling with the same class. Thus in total, the first element with class as .leftAddress remains hidden.

CSS Solution Demo

Note: As pointed out by xec in comments, the CSS solution works only when used on elements which are siblings. If they are not and say there is one element with class='leftAddress' inside a wrapper (another level) within the fieldset, both the first .leftAddress in the fieldset and the first .leftAddress within the wrapper in the fieldset will get hidden (like here).

So, in essence it hides the first element with that class within the same parent.

Javascript Based Solution:

If you don't have any problems with using Javascript to achieve this effect, you can do it using the below code. This solution doesn't have the limitation mentioned in the CSS based solution (sample can be seen here).

window.onload = function(){
    document.getElementsByClassName('leftAddress')[0].style.display = 'none';
}

document.getElementsByClassName('leftAddress')[0] - Gets the first element in the DOM with class name as leftAddress. The [0] is mandatory because getElementsByClassName returns a list of nodes (as the plural name suggests) and hence we have to reference it like we do with any array.
style.display = 'none' - Javascript equivalent of the CSS display: none.

JS Solution Demo

Note: As mentioned in Point 1, this currently hides the first element with that class within the entire document. If you want to restrict it to the first element with that class within the fieldset, that can also be done.

+1 Maybe also worth noting that this will work for siblings only, as opposed to the first found instance of `.leftAddress` on the page as a whole (like jquery's `$(".leftAddress").first()` would do) — xec, Aug 02 '14 at 12:40
@xec: Spot on mate. That is one thing that I overlooked probably because the user had `fieldset .leftAddress...` in his original selector. — Harry, Aug 02 '14 at 12:42
Another sidenote: `document.querySelector(".leftAddress")` would also work :) (IE8+) — xec, Aug 02 '14 at 15:13
@xec: True, but the general sibling selector I believe works in older versions of IE also. — Harry, Aug 02 '14 at 15:15
@Harry Your solution work for me. You helped me a lot. Thanks I used the css only solution. — Yamona, Aug 03 '14 at 22:06

Hide the first div with specific class

1 Answers1

CSS Based Solution:

Javascript Based Solution:

Linked