Поля ввода с динамической шириной [23/28]

Курсы §36. Флексбокс, часть 2
1

Друзья, помогите разобраться!
В HTML-коде три последовательных input в одном блоке div.
Псевдокласс :not в примере
.input:not(:first-child) {
border-left: 0;
}
работает, как я его и понимаю - т.е выбрать все input, кроме первого, что и показано на скрине.
Второй и третий input не имеют левой рамки.

В примере
.input:not(:last-child) {
border-right: 0;
}
я не понимаю почему он работает так, как на скрине. Ведь по идее, он должен убрать рамку справа у input"ов (кроме последнего) 1-го и второго. Но у второго он рамку справа оставил, а у последнего убрал!

%D0%B2%D0%BE%D0%BF%D1%80%D0%BE%D1%81
вопрос.PNG1901×1073 288 KB

Буду благодарен за ваши ответы.

2

Отвечу позже,
но сначала спрошу – как Вы понимаете такие правила?

:not(:first-child) {
  border-left: 0;
}

:not(:last-child) {
  border-right: 0;
}
3
  1. исключить first-child
  2. исключить last-child
4

Ответ верный, но не полный.
Исключить first-, last-child ГДЕ, в каких блоках?

5

Эти два правила закомментрируем, чтоб не мешали:

/*
.input:not(:first-child) {
    border-left: 0;
}

.input:not(:last-child) {
    border-right: 0;
} */
И разберёмся подробно...

Пишем:

:first-child {
  border: 1px dashed red;
}

Переводим с электрического языка на человеческий:
Нарисавать border
ВСЕМ ПЕРВЫМ ДОЧЕРНИМ ЭЛЕМЕНТАМ! (прямым потомкам)
ВО ВСЁМ ДОКУМЕНТЕ!

Смотрим на результат, и смотрим HTML.
border появился даже у тех элементов, на которые мы при стилизации уже давно не обращаем внимания – <html>, <head>.

<html> первый дочерний элемент документа – есть бордер.
<head> первый дочерний элемент своего родителя – элемента <html> – есть бордер.
У тега <head> display: none; поэтому мы его не видим, но бордер у него теперь есть.
И у <meta> он тоже есть по той же причине – первый дочерний у <head>.

А вот у элемента <body> border не появился, т.к. он является НЕ ПЕРВЫМ дочерним элементом своего родителя – элемента <html>.

Ну, и так далее до конца документа:
<div class="card"> – есть бордер.
<h1 class="card-title"> – есть.

<div class="input-container"> – нет бордера, потому, что не первый.

:not(:first-child) {
  border: 1px dashed red;
}

Нарисавать border
ВСЕМ ДОЧЕРНИМ ЭЛЕМЕНТАМ, КРОМЕ ПЕРВЫХ! (прямым потомкам)
ВО ВСЁМ ДОКУМЕНТЕ!

Здесь, надеюсь всё понятно – всем кроме первых…

Далее:

.input:first-child {
  border: 1px dashed red;
}

Нарисовать border
ВСЕМ ПЕРВЫМ ДОЧЕРНИМ ЭЛЕМЕНТАМ С КЛАССОМ INPUT! (прямым потомкам)
ВО ВСЁМ ДОКУМЕНТЕ!

Во всём документе селектор находит единственный элемент.

<div class="input-container">
  <input class="input">  <!-- ВОТ ОН -->
  <button class="add-on icon-start">Запустить</button>
  <a href="#more">Подробнее</a>
</div>

Ещё раз: элемент должен быть одновременно и первым в контейнере, и с классом .input.

Остальные элементы с классом .input хоть и прямые потомки, но не являются первыми.

.input:not(:first-child) {
    border: 1px dashed red;
}

ВО ВСЁМ ДОКУМЕНТЕ!
ВСЕМ ДОЧЕРНИМ ЭЛЕМЕНТАМ С КЛАССОМ input, КРОМЕ ПЕРВЫХ! (прямым потомкам)
нарисовать border.

Из трёх с классом .input – нужных два…

И, наконец, рассмотрим правило, из-за которого весь этот сыр-бор.
Кстати, зачем нам искать во всём документе, если эти несчастные .input находятся в конкретном месте?

Запишем точнее:

.input-container .input:not(:last-child) {
    border-right: 0;
}

Убрать бордер справа
У ВСЕХ ДОЧЕРНИХ ЭЛЕМЕНТОВ С КЛАССОМ input, КРОМЕ ПОСЛЕДНИХ.
ВНУТРИ ЭЛЕМЕНТА С КЛАССОМ input-container.

Результат вы уже знаете.
Посмотрим HTML:

<div class="input-container">
   <input class="input">
   <button class="add-on icon-start">Запустить</button>
   <a href="#more">Подробнее</a>
 </div>

 <div class="input-container">
   <span class="add-on">Количество</span>
   <input class="input">
 </div>

 <div class="input-container">
    <span class="add-on icon-search">Поиск</span>
    <input class="input">
    <button class="add-on button">Искать</button>
  </div>

В первом блоке <input class="input"> – НЕ последний, С классом .input – убираем бордер.
Во втором <input class="input"> – последний – правило не применяется, бордер остаётся.
В третьем блоке <input class="input"> – НЕ последний, С классом input – убираем бордер.

2 лайка
6

Мужик, ты крут, спасибо тебе:+1: