Как назначить правило CSS для первого элемента с определенным классом?

Question

У меня один и тот же класс несколько раз в той же DOM (как обычно), и я бы хотел применить прописку к первому элементу в DOM, используя этот класс. (Я использую sass).

До сих пор я пытался>

.myclass{ 
    &:first-of-type{ 
     padding-top: 50px; 
    } 
} 

и

.myclass{ 
    &:nth-child(1){ 
     padding-top: 50px; 
    } 
} 

и

.myclass{ 
     &:nth-of-type(1){ 
      padding-top: 50px; 
     } 
    } 

и только последняя часть кода, кажется, оказывает никакого влияния на DOM, добавляя отступы в ВСЕ элементы, использующие .myclass (а не только первый).

Любое представление о том, что я делаю неправильно?

Answer 1

Как насчет :first-of-type?

.myclass:first-of-type { 
    // do something 
} 

See this fiddle

EDIT

См @Ryan Dantzler скрипку об этом решении с помощью SASS:

https://jsfiddle.net/swpk5x86/2/