How to apply css style for HTML element using Mootools - css

Question

How can we hide all list element from first form in following html structure using mootools
<form method="post" action="/signup" class="global_form" enctype="application/x-www-form-urlencoded">
<div>
<div>
<ul class="form-errors">
<li>First Name
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
<li>Last name
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
</ul>
</div>
</div>
</form>
<form method="post" id="user_form_login" action="/login" class="global_form" enctype="application/x-www-form-urlencoded">
<div>
<div>
<ul class="form-errors">
<li>Uername
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
<li>Password
<ul class="errors">
<li>Please provide a valid answer for this field.</li>
</ul>
</li>
</ul>
</div>
</div>
</form>

Answer 1

This is completely untested and I switched to jQuery a while ago so there might be a cleaner way to do this, but this should give you a basic idea.
If you are trying to select multiple elements use the mootools dollars method.
If you were to append an id to the first form you could do something like this...
$$('#form1 li').setStyle('display', 'none');
OR
If you do not want to add an id tag this might work.
var firstForm = $$("form").getFirst(),
listElements = firstForm.getChildren('li');
listelements.setStyle('display', 'none');