CSS selector for "having previous sibling of"

Question

I have an element with a ng-list attribute. The very next sibling to this element is an <ol>. I want to write a CSS selector that selects this <ol>.

In other words, I want to write CSS that applies to an <ol> when the <ol> has an immediate previous sibling of [ng-list].

Possible?

related: http://stackoverflow.com/q/1817792/3597276 – Michael Benjamin Mar 13 '16 at 00:19 — Michael Benjamin, Mar 13 '16 at 00:19

Adam Jenkins · Answer 1 · 2015-02-13T18:18:32.287

4

It's called an adjacent sibling selector.

For starters, I would never ever write this CSS selector, you're tying to an angular attribute, it makes no sense. You should just give you OL a class.

[ng-list] + ol { /* rules here */ }

edited Feb 13 '15 at 18:18

answered Feb 13 '15 at 17:59

Adam Jenkins

51,445
11
72
100

score 2 · Accepted Answer · answered Feb 13 '15 at 18:00

CSS doesn't have a 'previous element' selector yet.

Since you want to select the ol that immediately follows another element, use +, it will select only the specified element that immediately follows the former specified element.

In your case

[ng-list] + ol {
    /* css rules */
}

Ref: 5.7 Adjacent sibling selectors

CSS selector for "having previous sibling of"

2 Answers2