Я пытаюсь создать навигацию с динамическими элементами, которые могут разбиваться на две строки при малых размерах экрана, и я хотел бы иметь возможность стилизовать первый и последний элементы в каждой строке.
Вот пример 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) подходы для этого эффекта?