1

Подскажите, пожалуйста, есть ли способ выборки селекторами CSS, предыдущего сестринского элемента. Что б было наглядно вот 

.input_login:focus+.about_item {
  color: red;
}
<label class="field_item">
  <p class="about_item">Login1</p>
  <input class="input_login" type="text" placeholder="Login">
  <p class="about_item">Login2</p>
</label>

Как по срабатыванию фокуса на input, скажем поменять цвет для слова Login1 на зелёный ? (без JS и глобальных правок в HTML)

BlackStar1991
  • 6,168
  • Мне перестановка через flex-box, как в примере, не подходит, надо что б на событие focus слово Login1 -перекрашивалось в green, а Login2 - перекрашивалось в red – BlackStar1991 Sep 30 '17 at 19:48
  • Andrey Fedorov показал, что я был не прав, хех.) И всё-таки это та же самая перестановка через flexbox – andreymal Sep 30 '17 at 20:35

1 Answers1

2

.field_item {
  display: flex;
}

.input_login:focus+.about_item {
  color: green;
}


.input_login:focus+.about_item+.about_item {
  color: red;
}


.field_item .about_item,
.field_item .input_login {
  order: 2;
}


.field_item .about_item:nth-of-type(1) {
  order: 1;
}
<label class="field_item">
  <input class="input_login" type="text" placeholder="Login">
  <p class="about_item">Login1</p>
  <p class="about_item">Login2</p>
</label>
Andrei Fedorov
  • 5,993