clases - seudo clases orden

[sonystar_17]

andaba haciendo una lista para probar con clases y seudo clases con font-awesome

Código HTML:

<ul class="di novec">
  <li>Multiple layout styles</li>
  <li>Posts navigation with next and previous post above the fold</li>
  <li>Attractive related post design
 
    <ul class="di nove">
      <li>one</li>
 
      <li>two</li>
 
    </ul>
    <ul class="di novea">
      <li>1</li>
 
      <li>2</li>
 
    </ul>
 
  </li>
 
</ul>
 

y el css este :

Código CSS:

ul.di {list-style:none;list-style-type:none}
ul.di li:before{font-family:FontAwesome;content:'\f105';padding-right:10px;margin-left:-16px;line-height:26px;font-size:14px}
 
ul.di.nove li:before{content:'\f2b1'}
ul.di.novea li:before{content:'\f20a';}
ul.di.novec li:before{content:'\f21a';}
 

me causo curiosidad algo que hasta ahora no me habia fijado :
si en el primer ul

Código HTML:

<ul class="di novec">
 

tengo la ultima asignada :

Código CSS:

ul.di.novec li:before{content:'\f21a';}
 

las demas ul , no toman el valor que les asigno si no el de esa clase ( di novec )

si cambio la clase del primer ul a di novea , solo aceptara las de ( di novec ) , las de ( di nove ) no las acepta

soy novato en CSS apenas voy leyendo , existe un orden fijo ? en las clases ?

desde abajo hacia arriba ?
si alguien es tan amable de explicarme o dejarme alguna referencia le agradecería !