Я пытаюсь добавить границу к 1-му элементу на <div class="about-text-wrap">, однако я пробовал комбинацию каждого класса css, о котором я могу думать, чтобы нацелить ребенка на n-й ребенок, но ничего не работаетЦелевое nth-child в вложенных divs

<div class="block-wrap"> 
    <div class="grid grid--gutters grid--full gridmd--1of3 gridlg--1of3 gridxl--1of3"> 
<div class="cell"> 
    <div class="about-img"><img src="../../../assets/img/brush.png"/></div> 
    <div class="about-text-wrap"> 
    <div class="about-title"> 
     <h3> 
     Designed by <br/>10 STRV Designers 
     </h3> 
    </div> 
    <div class="about-text"> 
     <h5>Every piece of this car is handmade</h5> 
    </div> 
    </div> 
</div> 
<div class="cell"> 
    <div class="about-img"><img src="../../../assets/img/flower.png"/></div> 
    <div class="about-text-wrap"> 
    <div class="about-title"> 
     <h3> 
     Designed by <br/>10 STRV Designers 
     </h3> 
    </div> 
    <div class="about-text"> 
     <h5>Every piece of this car is handmade</h5> 
    </div> 
    </div> 
</div> 
<div class="cell"> 
    <div class="about-img"><img src="../../../assets/img/heart.png"/></div> 
    <div class="about-text-wrap"> 
    <div class="about-title"> 
     <h3> 
     Designed by <br/>10 STRV Designers 
     </h3> 
    </div> 
    <div class="about-text"> 
     <h5>Every piece of this car is handmade</h5> 
    </div> 
    </div> 
    </div> 
</div> 
</div> 

.grid { position:relative; display: flex; flex-wrap: wrap; flex-direction:row ;list-style: none; margin: 0; padding: 0; } 
.cell { position:relative; flex:1;flex-direction: column; display:flex; align-items: center; text-align:left;} 

.block-wrap{position:absolute; 
top:0; 
bottom:330px; 
left:0; 
right:0; 
max-width:1000px; /* Assign a value */ 
min-height:500px;; /* Assign a value */ 
margin:auto; background:#fff; 
box-shadow: 0px 2px 34px 0px rgba(221,221,221,1); } 
.about-img {padding:20px;} 
.about-text-wrap{height:auto; width:100%; } 
.block-wrap .cell .about-text-wrap:nth-child(1){height:auto; width:100%; border-right:1px solid #e7e7e7;} 
.grid .cell .about-text-wrap:nth-child(1){height:auto; width:100%; border-right:1px solid #e7e7e7;} 
.cell .about-text-wrap:nth-child(1){height:auto; width:100%; border-right:1px solid #e7e7e7;} 
.about-text-wrap:nth-child(1){height:auto; width:100%; border-right:1px solid #e7e7e7;} 
.about-title{padding:0 30px;} 
.about-text{padding:10px 30px; color:#d0d0d0;}

2017-01-11 tom harrison

ли вы имеете в виду о-текст-обертку, которая во второй ячейке? – Marvin

Я обновил свой ответ с фиксированным фрагментом (нижняя позиция толкала все в скрипке). Я думаю, что это то, о чем вы просили ... – MarioZ

правильный селектор будет:

.cell:nth-child(2) .about-text-wrap { 
    height: auto; 
    width: 100%; 
    border-right: 1px solid #e7e7e7; 
}

Это говорит применить стиль к about-text-wrap элемент, расположенный во 2-й инстанции (nth-child(2)) из .cell

Updated Fiddle

источник

2017-01-11 18:07:47 APAD1

Спасибо, я ломал себе голову, почему это не работает –

Вы были почти там, единственная проблема в том, что вы пытались получить «n-й-ребенок» '' .about-text-wrap', когда вы должны были получить 'nth-child'' .cell'. – APAD1

Кроме того, я заметил, что после того, как я отправил свой ответ, вы изменили элемент, на который вы пытались настроить таргетинг. Если вы хотите нацелить элемент '.about-text-wrap' в первом столбце, вы можете вместо этого использовать' first-child'. [Вот скрипка, чтобы показать это] (https://jsfiddle.net/cycf0qsf/4/). – APAD1

Используйте это:

.about-text-wrap > :nth-child(1) { 
    border-right:1px solid black; 
}

С > вы выбираете только прямые дети и :nth-child(1) выбирает первый (в данном случае). Если вы не используете >, вы выбираете всех потомков, любых предметов, которые находятся под ним.

.grid { position:relative; display: flex; flex-wrap: wrap; flex-direction:row ;list-style: none; margin: 0; padding: 0; } 
 
.cell { position:relative; flex:1;flex-direction: column; display:flex; align-items: center; text-align:left;} 
 
.about-text-wrap > :nth-child(1) { 
 
    border-right:1px solid black; 
 
} 
 
.block-wrap{position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    max-width:1000px; /* Assign a value */ 
 
    min-height:500px;; /* Assign a value */ 
 
    margin:auto; background:#fff; 
 
    box-shadow: 0px 2px 34px 0px rgba(221,221,221,1); } 
 
.about-img {padding:20px;} 
 
.about-text-wrap{height:auto; width:100%; } 
 

 
    
 
.about-text-wrap{height:auto; width:100%; } 
 
.about-title{padding:0 30px;} 
 
.about-text{padding:10px 30px; color:#d0d0d0;}

<div class="block-wrap"> 
 
    <div class="grid grid--gutters grid--full gridmd--1of3 gridlg--1of3 gridxl--1of3"> 
 
    <div class="cell"> 
 
     <div class="about-img"><img src="../../../assets/img/brush.png"/></div> 
 
     <div class="about-text-wrap"> 
 
     <div class="about-title"> 
 
      <h3> 
 
      Designed by <br/>10 STRV Designers 
 
      </h3> 
 
     </div> 
 
     <div class="about-text"> 
 
      <h5>Every piece of this car is handmade</h5> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="about-img"><img src="../../../assets/img/flower.png"/></div> 
 
     <div class="about-text-wrap"> 
 
     <div class="about-title"> 
 
      <h3> 
 
      Designed by <br/>10 STRV Designers 
 
      </h3> 
 
     </div> 
 
     <div class="about-text"> 
 
      <h5>Every piece of this car is handmade</h5> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="cell"> 
 
     <div class="about-img"><img src="../../../assets/img/heart.png"/></div> 
 
     <div class="about-text-wrap"> 
 
     <div class="about-title"> 
 
      <h3> 
 
      Designed by <br/>10 STRV Designers 
 
      </h3> 
 
     </div> 
 
     <div class="about-text"> 
 
      <h5>Every piece of this car is handmade</h5> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2017-01-11 18:19:57 MarioZ

Целевое nth-child в вложенных divs

ответ

Updated Fiddle

Смежные вопросы