Is it sometime good to give priorities to classes over advanced CSS selectors for better understanding?

For example my code is this .I'm only having 2 items under the #contacts div.

#contacts {list-style:none; overflow:hidden; margin-left:7px; margin-bottom:1开发者_如何学Go0px}
.address { float:left}
.tel { float:right}

I can also do the same with this

#contacts {list-style:none; overflow:hidden; margin-left:7px; margin-bottom:10px}
#contacts span:first-child { float:left}
#contacts span:last-child { float:left}

---

Rather use

#contacts .address {...}
#contacts .tel {...}

or even better if you need to float both

#contacts .address, #contacts .tel {float:left;}

In case some day you have to add .fax too you have much less work to do. Also i think this is much more clear to understand for a programmer that will pick up the code after you.

---

The :first-child and :last-child pseudo elements make sense if the children don't convey specific information. If the child elements (as in this case) do convey specific details, then classes (or better still, HTML5 microdata attributes) are more suitable.