How the display works: none. And how does it affect the way the cells are numbered in the subsidiary body of the container.

[jonetta]

Please tell me how to get the result, how to use the code below on the picture and not using it. first/last-of-type and first/last-child and how it works. display: none and how does it affect the indexation in the subsidiary body of the container?

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>

[Demir]

:nth-child() It does not affect the subsidiary but the element itself.

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>