Стиль дивы/ш же класса на основе родитель-потомок связи (бутстраповские классы)

Question

У меня есть следующий HTML:

<div class="row"> 
    <div class="col-md-6">...</div> 
    <div class="col-md-6">...</div> 
</div> 

Желаемая эффект:

.row { 
    ~div:nth-child(1) /*also tried*/ ~div:first-child /*also tried*/ ~div:first-of-type { 
     position:relative; 
     left:5vw; 
    } 

    ~div:nth-child(2) /*also tried*/ ~div:last-child /*also tried*/ ~div:last-of-type { 
     position:relative; 
     right:5vw; 
    } 
} 

Последствие:

Я могу выбрать детей .row
тестирование с цветом: красный; Я стиль содержимого .col-md-6 (они установлены для наследования цвета)
тестирование с фоном-цвет: красный; Я стилизация .row
и позиционирование снова стиль внуки .row

Примечание:

Класс .col-мкр-6 в Umbraco фонового не может измениться, так как они находятся в используйте другие места в веб-приложении. Я не ищу, чтобы добавлять классы вручную в задней части и не добавлять классы с JS на основе позиции

Как я могу получить
:nth-child(1)/:first-child/:first-of-type
целевой правильный DIV, и только сам DIV, для позиционирование?

Answer 1

Ответ для позиционирования

position:page; 

будет работать для позиционирования внутри .row

Answer 2

div { width: 100% } 
 

 
.row div:nth-child(1) { 
 
    background-color: red; 
 
} 
 
.row div:nth-child(2) { 
 
    background-color: blue; 
 
}

<div class="row"> 
 
    <div class="col-md-6">...</div> 
 
    <div class="col-md-6">...</div> 
 
    <div class="col-md-6">...</div> 
 
    <div class="col-md-6">...</div> 
 
    <div class="col-md-6">...</div> 
 
    <div class="col-md-6">...</div> 
 
    <div class="col-md-6">...</div> 
 
    <div class="col-md-6">...</div> 
 
</div>