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

Question

[av_tyschenko]

Перед мной встала такая вот задача, если row_inner стоит первым элементов в div.row, то ему прописывается css top:40;, но если он не первый, то top:0;

:first-child ищет первый элемент в элементе, но он не дружит с определением позиции. Возможно есть какие то вспомогательные операторы которые позволяют определять позицию или более сложный CSS что бы допустим проверить первый элемент на наличии класса row_inner.

Мой код намного более запутанный, но если все упросить, выглядит примерно так)

В этом случае я хочу что бы row_inner получал top:0px

<div class="row">
    <div class="row_inner"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

В этом случае я хочу что бы row_inner получал top:30px

<div class="row">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
    <div class="row_inner"></div>
</div>

PS: Увы, но через JS решать проблему у меня нету возможности, ищу решение именно на CSS

Answer 1

[khipster]

Ещё как дружит, это ты с родительским селектором перепутал ;P

div > .row_inner:first-child {
...
}
div > .row_inner:last-child {
...
}

Comments

[av_tyschenko]

Я видимо не правильно написал свой вопрос. Мне нужно что бы он у меня его не искал, а проверял только первый элемент на наличие класса row_inner. Если использовать first-child, и допустим добавить ему рамку, в не зависимости от положения. row_inner будет получать рамку.

[av_tyschenko]

Над примерами кода, дописал что в конечном итоге нужно получить

[khipster]

av_tyschenko: работает, работает

[av_tyschenko]

Что работает, работает... Оно может и работает, но не так как я описал. Речь идет не о первом и последнем, а только о первом. Как работает first-child, я прекрасно разбираюсь. Вы видимо не до конца понимаете моей мысли.

[khipster]

av_tyschenko: Используй :not

[av_tyschenko]

Зайдествовал .vc_element:first-child и .vc_element:not(:first-child), помогло

[khipster]

av_tyschenko: молодец, голова!