CSS Выбрать последний элемент пролета

Question

CSS Выбрать последний элемент пролета

0

У меня есть код CSS:

span.input:last-child {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    49% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 0.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    49% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 0.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    49% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 0.0; }
}

и у меня есть этот код HTML:

<div class="tc">Some More Text</div>
<br>
<div class="content">
    Hello<br>
    <span class="input">_</span><br>
    <span class="input">_</span><br>
</div>

Проблема в том, что последний span.input не span.input вообще. Как заставить его работать, используя только CSS?

KevinT. 15 март 2014, в 13:11

Источник

Теги:

html

css

css-selectors

1 ответ

Ещё вопросы

Hashem Qolami · Accepted Answer · 2014-03-15T09-28-00.000Z

Поскольку последний ребенок из .content DIV является <br> элемент. И :last-child не соответствует <span>.

element:last-child pseudo class представляет последний дочерний element родительского element соответствующий этому element.

Вы можете использовать псевдо-класс :last-of-type для выбора последнего элемента <span>, как показано ниже:

span.input:last-of-type {
    /* styles goes here... */
}

РАБОЧАЯ ДЕМО.

Однако обратите внимание, что ни .input :last-of-type ни псевдо :last-child псевдослучайны относятся к .input классов .input, они смотрят прямо в .input дерево родителя, а не на список element.class.

Из MDN:

Псевдокласс класса :last-of-type представляет последний родной элемент его типа в списке дочерних элементов его родительского элемента.

Стоит отметить, что :last-of-type псевдо-класс :last-of-type поддерживается в IE9+.

В качестве альтернативы в этом конкретном случае вы можете использовать общий селектор ~ (который поддерживается в IE7+), чтобы выбрать второй элемент span.input следующим образом:

span.input ~ span.input {
    /* styles goes here... */
}

ОБНОВЛЕНО ДЕМО.