var first = document.querySelector('.home > .red');

var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc

.red:first-child, :not(.red) + .red { border:5px solid red }

$(".red:first").addClass("first");

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

.home span + .red{
      border:1px solid red;
    }

<div class="home">
  <span>blah</span>
  <p class="red">first</p>
  <p class="red">second</p>
  <p class="red">third</p>
  <p class="red">fourth</p>
</div>

.home span + .red{
      border:3px solid green;
    }

.class_name > *:first-child {
        border: 1px solid red;
    }

.class:first-of-type { }

.home > span + .red{
      border:1px solid red;
    }

<aside id="element_id">
  Content
  <div class="class_name">First content that need to be styled</div>
  <div class="class_name">
    Second content that don't need to be styled
    <div>
      <div>
        <div class="class_name">deep content - no style</div>
        <div class="class_name">deep content - no style</div>
        <div>
          <div class="class_name">deep content - no style</div>
        </div>
      </div>
    </div>
  </div>
</aside>

.home p:first-of-type