Categorizing based on Class with CSS

How to categorize sibling elements that are given unique classes with pure CSS.

by Augustus Yuan

HTML

<a href="" class="Category1">Item in Cat 1</a>
<a href="" class="Category2">Item in Cat 2</a>
<a href="" class="Category1">Item in Cat 1</a>
<a href="" class="Category1">Item in Cat 1</a>
<a href="" class="Category2">Item in Cat 2</a>
<a href="" class="Category2">Item in Cat 2</a>
<a href="" class="Category1">Item in Cat 1</a>
<a href="" class="Category1">Item in Cat 1</a>
<a href="" class="Category3">Item in Cat 3</a>
<a href="" class="Category1">Item in Cat 1</a>

CSS

.Category1 {
    color: red;
    position: relative;
    top: 0px;
    float: left;
}

.Category2 {
    color: blue;
    position: relative;
    top: 100px;
}

.Category3 {
    color: green;
    position: relative;
    top: 200px;
}

JavaScript

//Can we do better?