Псевдокласс: nextTo?

Question

Допустим, у меня есть следующий HTML-код:

<ul>
    <li id="1">First issue.</li>
    <li id="2" class="error">Second issue.</li>
    <li id="3" class="error">Third issue.</li>
    <li id="4">Fourth issue.</li>
    <li id="5" class="error">Fifth issue.</li>
    <li id="6" class="error">Sixth issue.</li>
    <li id="7" class="error">Seventh issue.</li>
    <li id="8" class="error">Eighth issue.</li>
    <li id="9">Ninth issue.</li>
    <li id="10" class="error">Tenth issue.</li>
</ul>

И следующий CSS-код:

.error {
    background-color: rgba(255, 0, 0, 0.2);
}

Что я хочу сделать, так это стилизовать первый и последний <li> в последовательности, отличной от других <li> в середине.

Например, #2, #5, #10 должно соответствовать «селектору первого в последовательности»;#3, #8, #10 должен соответствовать «последний в последовательности».

Я бы хотел применить следующие стили к «первым в последовательности» и «последним в последовательности», соответственно:

.firstInSequence {
    border-radius-top-right: 10px;
    border-radius-top-left: 10px;
}

.lastInSequence {
    border-radius-bottom-right: 10px;
    border-radius-bottom-left: 10px;
}

Есть ли селекторы, которые я мог бы использовать, чтобы сделать это изначально в CSS?

Answer 1

Как указано в других ответах, вы можете стилизовать 'first of sequence', используя псевдоселектор :not и :first-child:

:not(.error) + .error,
.error:first-child {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

Я думаю, что нашел решение для 'последняя последовательность »в этом сценарии с закругленными углами.Он использует совершенно другой метод для изготовления готового продукта, но заканчивается аналогичным результатом:

Основной метод заключается в применении псевдоэлементов сradial-gradients для вывода списка элементов, которые не являются .error. после .error с, и перемещения их вверх над предыдущим (.error) элементом списка:

.error + :not(.error):before {
    content:'';
    display:block;
    width:10px;
    height:10px;
    position:absolute;
    top:-20px;
    left:0;
    background:-webkit-radial-gradient(100% 0,circle,transparent 10px,white 0);
}

.error + :not(.error):after {
    content:'';
    display:block;
    width:10px;
    height:10px;
    position:absolute;
    top:-20px;
    right:0;
    background:-webkit-radial-gradient(0 0,circle,transparent 10px,white 0);
}

Убедитесь, что li имеет position:relative;.

Наконец, для border-radius на последнем используйте last-of-type:

.error:last-of-type{
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px
}

Демо (Webkit только для простоты)

Answer 2

Для «первого в последовательности» вы можете попробовать это, если элементы смежны:

Демонстрация: http://jsfiddle.net/WkxyP/

:not(.error) + .error,
.error:first-child {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

• :not(.error) + .error - Theследующий смежный элемент с классом «error» к элементу без класса «error»
• .error:first-child - Любой элемент с классом «error», который является первым дочерним элементом другого элемента, в случаях, когда вышеуказанный селектор может 't match

Я думаю, что охватывает все.Не уверен, как сделать «последний в последовательности» с этой конкретной загадкой.

Кстати : проверьте имена своих свойств, должно быть border-top-left-radius вместо border-radius-top-left и т. Д..

Answer 3

Я думаю, что вы можете собрать воедино все это, но не все.Но вот мои мысли для начала.

Либеральное использование CSS3 , а не селектор и соседний братский комбинатор .

Это те части, которые, я думаю, у вас есть шанс сделать.

http://jsfiddle.net/PDQMg/

Ошибка первая в списке

li.error:first-child {  }
<li error />
<li noerror />
...
<li />

Ошибкапосле ошибки нет.

li:not(li.error) + li.error { }
<li noerror />
<li error />
...
<li />

Ошибка является последней в списке

li.error:last-child { }
<li />
...
<li class="error" />