Tengo este diseño y me gustaría seguir eliminando el último hijo de la lista (reducir) cuanto menor sea la resolución. El código es exactamente mi implementación:

p > span {
  font-weight: bold;
}

.layout1 {
  width: 1170px;
  list-style: none;
  background: gray;
  position: relative;
}

.layout1 > li {
  display: inline-block;
  vertical-align: top;
  width: 24%;
  margin-right: 1%;
  height: 100px;
  background: #dbca7f;
}

.layout1 > li:last-child {
  margin-right: 0;
}

/* 
/* This is what I'd like to do for about 3 times, keep cutting, ignore the (-justToMakeItNotWork, the code would otherwise work without it. */

@media screen and (max-width: 990px) {
  .layout1(-justToMakeItNotWork) > li:last-child {
    display: none;
  }
}

/* And again */

@media screen and (max-width: 768px) {
  .layout1(-justToMakeItNotWork) > li:last-child {
    display: none;
  }
}

/* And again, probably */
  
<!-- There are other bootstrap classes added, but only col-XX-NN, irrelevant to the issue. -->
<p> This is the full view </p>
<ul class="layout1 col-md-12">
  <li class="post col-md-3">
  <li class="post col-md-3">
  <li class="post col-md-3">
  <li class="post col-md-3">
</ul>

<p> Let's assume that we're now unde 768px, <span> I'd like to now cut the number of posts show to 3</span>, like this: </p>

<ul class="layout1 col-md-12">
  <li class="post col-md-3">
  <li class="post col-md-3">
  <li class="post col-md-3">
</ul>

<p> That would work fine with just a rule, okay, but now let's say my screen got down-graded to ~468px. <span>I'd like to do it again and cut my posts to just 2: </span></p>

<ul class="layout1 col-md-12">
  <li class="post col-md-3">
  <li class="post col-md-3">
</ul>

Lo que se traduce en, a plena vista:

My Full Layout

Me gustaría lograr, en pantallas inferiores, algo como esto:

The lower resolution example.

Y 2 columnas / publicaciones en <468px respectivamente.

La tabla de valores:

1170px - 4 columns.
990px - 4 columns.
768px - 3 columns.
468px - 2 columns.

Desafortunadamente, agregar @media-queries para seguir eliminando el último hijo no funciona después de eliminar el primer last-child. ¿Cómo puedo arreglar esto?

Además, no puedo agregar una regla para eliminar los últimos 2 hijos, porque la regla de mayor resolución ya ha recortado 1 publicación, por lo tanto, solo me quedará una publicación.

0
Daniel Moss 26 oct. 2017 a las 22:24

3 respuestas

La mejor respuesta

Puede usar nth-last-child de manera similar a nth-child

@media screen and (max-width: 990px) {
  .layout1 > li:nth-last-child(1) {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .layout1 > li:nth-last-child(2) {
    display: none;
  }
}
p > span {
  font-weight: bold;
}

.layout1 {
  list-style: none;
  background: gray;
  position: relative;
}

.layout1 > li {
  display: inline-block;
  vertical-align: top;
  width: 24%;
  margin-right: 1%;
  height: 100px;
  background: #dbca7f;
}

.layout1 > li:last-child {
  margin-right: 0;
}

/* 
/* This is what I'd like to do for about 3 times, keep cutting, ignore the (-justToMakeItNotWork, the code would otherwise work without it. */

@media screen and (max-width: 990px) {
  .layout1 > li:nth-last-child(1) {
    display: none;
  }
}

/* And again */

@media screen and (max-width: 768px) {
  .layout1 > li:nth-last-child(2) {
    display: none;
  }
}

/* And again, probably */
<!-- There are other bootstrap classes added, but only col-XX-NN, irrelevant to the issue. -->
<p> This is the full view </p>
<ul class="layout1 col-md-12">
  <li class="post col-md-3">
  <li class="post col-md-3">
  <li class="post col-md-3">
  <li class="post col-md-3">
</ul>
2
Joseph Marikle 26 oct. 2017 a las 19:34

Puede usar :nth-child(n+x) para seleccionar elementos. Como "seleccionar todos menos los primeros elementos x".

@media screen and (max-width: 768px) {
  .layout1 > li:nth-child(n+3) {
    display: none;
  }
}

@media screen and (max-width: 468px) {
  .layout1 > li:nth-child(n+2) {
    display: none;
  }
}
1
Daniel Sixl 26 oct. 2017 a las 19:50

Puede usar :nth-last-child(-n+2) para obtener los últimos 2 hijos:

@media screen and (max-width: 768px) {
  .layout1(-justToMakeItNotWork) > li:nth-last-child(-n+2) {
    display: none;
  }
}
1
Jonathan 26 oct. 2017 a las 19:34