Как работает display: none. И как он влияет на порядок нумерации элементов в массиве дочерних элементов контейнера

Question

Подскажите пожалуйста, как получить результат, как на картинке используя код ниже и не используя first/last-of-type and first/last-child и как вообще работает display: none и как он влияет на порядок индексации в массиве дочерних элементов контейнера?

div > div {
  width: 100px;
  height: 100px;
  background: coral;
}

.container div:nth-child(1){
  display: none;
}

.container:nth-child(2){
  visibility: hidden;
}

.container div:nth-child(3) {
    visibility: visible;
}

<div class="container">
  <div>Not Displayed</div>
  <div>Hiddnen</div>
  <div>Visible</div>
</div>

Answer 1

:nth-child() воздействует не на дочерний элемент, а на сам элемент

div {
  width: 100px;
  height: 100px;
  
}

div:nth-child(1) {
  display: none;
  background: red;
}

div:nth-child(2) {
  visibility: hidden;
  background: green;
}

div:nth-child(3) {
  visibility: visible;
  background: blue;
}

<div>Not Displayed</div>
<div>Hiddnen</div>
<div>Visible</div>

Answer 2

display: none; - убирает элемент с потока, как будто его нету. visibility: hidden; - делает содержимое невидимым. Эквивалентно opacity: 0

div > div {
  width: 100px;
  height: 100px;
  background: coral;
}

.container div:nth-child(1){
  display: none;
}

.container div:nth-child(2){
  visibility: hidden;
}

.container div:nth-child(3) {
    visibility: visible;
}

<div class="container">
  <div>Not Displayed</div>
  <div>Hiddnen</div>
  <div>Visible</div>
</div>

Answer 3

На индексацию элементов display:none не влияет никак. Пруф в коде ниже (в нижнем блоке с помощью display:none скрыт чайлд № 2). Оттого что его убрали из потока и запретили отображение, элемент из DOM никуда не делся - он все так же учитывается при подсчете числа потомков, ну и заодно доступен для изменения и получения содержимого яваскриптом.

/* visual */

.son {
  display: inline-block;
  margin: 5px;
  padding: 2px 10px;
  background: pink;
}

.papa {
  display: inline-block;
  border: 2px solid gray;
}


/* testing */

.son:nth-child(4) {
  background-color: red;
}

.son:nth-of-type(5) {
  background-color: orange;
}

<div class="papa">
  <div class="son">1</div>
  <div class="son">2</div>
  <div class="son">3</div>
  <div class="son">4</div>
  <div class="son">5</div>
  <div class="son">6</div>

</div>
<br/>
<br/>

<div class="papa">
  <div class="son">1</div>
  <div class="son" style="display:none;">2</div>
  <div class="son">3</div>
  <div class="son">4</div>
  <div class="son">5</div>
  <div class="son">6</div>

</div>

БЛОГ НА HUSL

Как работает display: none. И как он влияет на порядок нумерации элементов в массиве дочерних элементов контейнера

Ответы (3 шт):