Как назначить стиль в зависимости от кол-ва элементов в списке?

[Shitbox2]

Есть список с элементами, нужно этому списку назначать разные стили в зависимости от кол-ва элементов в нем. Если один элемент, то будет class="area size1", если два — class="area size2" и т. д. Хочется сделать этот код компактным и желательно поместить внутрь тега списка. Как это сделать?

<ul class="area" onload="???">
    <li></li>
    ...
    <li></li>
</ul>

[Deff]

<style>
ul.size-2 {
 color:blue;
}
ul.size-3 {
 color:red;
}
</style>



<ul class="area">
    <li>dsds</li>
    <li>dsds</li>
    ...
    <li>sdds</li>
</ul>

<ul class="area">
    <li>dsds</li>
    ...
    <li>sdds</li>
</ul>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul.area").each(function() {
  var a="size-" + $(this).find('li').length;
  $(this).removeClass(a).addClass(a)
});
});
</script>

[Shitbox2]

Работает, но слишком далеко от тега. По сути, мне нужно эмулировать CSS-селектор, который назначает разные стили в зависимости от количества элементов в контейнере. Поэтому логика должна быть как можно ближе к тегу. Может быть есть другие события помимо onload, которые подойдут?

[Deff]

Shitbox2,

Работает, но слишком далеко от тега

Вариант работает для всех тегов с данным классом
Достаточно одного на странице, ставите в удобное место
Переместил

[Shitbox2]

Хм... А может быть и есть логика. Поместить на страницу кусок кода, отвечающего непосредственно за оформление. И что-то вроде такого написать

<ul class="area" data-addCountElemsClass="size">
    <li>dsds</li>
    ...
    <li>sdds</li>
</ul>

Своего рода расширение CSS