Минус: как ссылаться на родителя в nth-child - PullRequest
Новая
       11

Минус: как ссылаться на родителя в nth-child

0 голосов
/ 23 марта 2019

Вот что у меня есть:

Меньше: 

.parent{
  &-caption{
    color:red;
  }

  &:first-child{
    border: solid blue !important;
    &-caption{
      color:blue !important;
    }
  }
}

HTML 

<div class="parent">
  <div class="parent-caption">One</div>
</div>
<div class="parent">
  <div class="parent-caption">Two</div>
</div>
<div class="parent">
  <div class="parent-caption">Three</div>
</div>

Проблема : Но цвет заголовка первого ребенка не становится синим.

Возможно ли это в LEss? Я знаю, что это возможно в Sass.

Спасибо

1 Ответ

0 голосов
/ 23 марта 2019

Ваш less компилируется в следующий css: 

.parent-caption {
  color: red;
}
.parent:first-child {
  border: solid blue !important;
}
.parent:first-child-caption {
  color: blue !important;
}

Как видите, это не совсем правильный css.* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Ниже.

.parent .parent-caption {
  color: red;
}
.parent:first-of-type .parent-caption {
  color: blue;
}
<div class="parent">
  <div class="parent-caption">One</div>
</div>
<div class="parent">
  <div class="parent-caption">Two</div>
</div>
<div class="parent">
  <div class="parent-caption">Three</div>
</div>

Вы можете сделать это в Менее примерно так: 

.parent {
  &-caption {
    color: red;
  }
  &:first-of-type &-caption{
    color: blue;
  }
}

Объяснение этой функции на странице функций of Less css под заголовком «Родительские селекторы».

...