Селектор для первого и последнего элемента встроенного блока на новой строке

Я пытаюсь создать навигацию с динамическими элементами, которые могут разбиваться на две строки при малых размерах экрана, и я хотел бы иметь возможность стилизовать первый и последний элементы в каждой строке.

Вот пример scss, который разбивается при малых размерах экрана (закругленные углы должны быть на первом и последнем элементе в каждой строке):

<ul>
    <li>First page</li>
    <li>Second page</li>
    <li>Third page</li>
    <li>Fourth page</li>
    <li>Another example page</li>
    <li>This could be the last page</li>
    <li>But its not</li>
    <li>This is actually the last page</li> 
</ul>

ul {
    list-style:none;
    font-size:0px;
    li {
        font-size:18px;
        display:inline-block;
        padding:10px 30px;
        border:1px solid black;
        margin:10px -1px 10px 0;
        &:first-child {
            border-top-left-radius:5px;
            border-bottom-left-radius:5px;
        }
        &:last-child {
            border-top-right-radius:5px;
            border-bottom-right-radius:5px;
        }
    }        
}

С релевантным jsfiddle: http://jsfiddle.net/tbw4f23g/1/

Можно ли выбрать селектор для первого и последнего элемента встроенного блока, который запускается на новую строку или существуют ли какие-либо другие (не javascript) подходы для этого эффекта?

Ответы

Ответ 1

Существует не только CSS-способ. Я добавил решение JavaScript в вашей скрипте.

В качестве обходного пути вы можете назначить фиксированную процентную ширину для перечисления элементов и использовать запросы мультимедийных запросов CSS для увеличения/уменьшения ширины на основе размера экрана. Таким образом, вы точно знаете, сколько элементов подходит для линии, что в свою очередь позволяет вам стилизовать определенные элементы. SASS может упростить запись повторяющихся CSS. Грубая схема (открыть полную страницу и изменить размер браузера):

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
li {
  float: left;
  box-sizing: border-box;
  margin-bottom: .5em;
  border: thin solid #EEE;
  padding: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #CEF;
}
li:first-child {
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}
li:last-child {
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}
@media (min-width: 600px) and (max-width: 799px) {
  /* 4 items per row */
  li {
    width: 25%;
  }
  /* match 4, 8, 12, ...*/
  li:nth-child(4n+4) {
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
  }
  /* match 5, 9, 13, ... */
  li:nth-child(4n+5) {
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
  }
}
@media (max-width: 599px) {
  /* 3 items per row */
  li {
    width: 33.3333%;
  }
  /* match 3, 6, 9, ... */
  li:nth-child(3n+3) {
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
  }
  /* match 4, 7, 10, ... */
  li:nth-child(3n+4) {
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
  }
}
<ul>
  <li>Praesent ultricies libero</li>
  <li>Aenean in velit vel</li>
  <li>Ut consequat odio</li>
  <li>Integer convallis sapien</li>
  <li>Fusce placerat augue</li>
  <li>Vestibulum finibus nunc</li>
  <li>Nulla consectetur mi</li>
  <li>Ut sollicitudin metus</li>
  <li>Maecenas quis nisl sit</li>
  <li>Vivamus eleifend justo</li>
  <li>Duis ut libero pharetra</li>
</ul>

Ответ 2

Можно ли выбрать селектор для первого и последнего элемента встроенного блока, который запускается на новую строку или существуют ли какие-либо другие (не javascript) подходы для этого эффекта?

Нет, таких селекторов нет. CSS не обеспечивает доступа к информации о том, где строки прерываются (с ограниченным исключением псевдоэлемента :first-line). Нет, для этого эффекта не существует других подходов, не относящихся к JavaScript.

Если вы хотите использовать JS, вы можете выполнять итерацию по всем элементам всякий раз, когда макет мог быть изменен, изучить позицию каждого vis-a-vis по отношению к его родительскому контейнеру, судить, идет ли это против левой или правой стороны, затем примените свой радиус границы.

Еще одно возможное решение JS - это выполнить ваши собственные расчеты с линейной разверткой, аккумулируя ширину и выясняя, где должен произойти разрыв.

Возможно, вам захочется изучить библиотеки, такие как масонство, чтобы узнать, предоставляют ли они перехваты, позволяя вам получить доступ к внутренней конфигурации макета, что упростит это.