Styling all but the first selected element?

Question

I'm selecting custom elements like this:

app-csv-header-selection {
    margin-left: 2rem;
}

And that works fine. I'd also like to exclude the styling from the first element selected.

Is this possible without also involving a parent container?

A pseudo example would be something like:

app-csv-header-selection:not(:first) {
    margin-left: 2rem;
}

Your CSS is missing a designation of class or id. Can you please add the html you are trying to operate on? — jmargolisvt, Aug 28 '20 at 14:53
It's targeting custom angular elements (`app-csv-header-selection`) — Ole, Aug 28 '20 at 14:54
It's close - but ideally the answer would not have to use a first container. Any time we are doing `first-child` the parent container is the context. — Ole, Aug 28 '20 at 15:03

score 2 · Accepted Answer · edited Aug 28 '20 at 15:32

2

app-csv-header-selection:not(:first-of-type) {
        margin-left: 2rem;
}

Works. The reason for using first-of-type is to make sure only app-csv-header-selection elements are included in the selection.

edited Aug 28 '20 at 15:32

Ole

answered Aug 28 '20 at 14:57

Clashbestie

1

It seems like that should work, but I just tried it and the margin is still applied to the first element. – Ole Aug 28 '20 at 15:00
1

Good try though - Not sure who down voted it - but I voted it back up, because I also thought it should work. – Ole Aug 28 '20 at 15:02
2

For no parent container, `:not(:first-of-type)` is the right answer. If there's more going on --such as dynamic elements-- please add more details to your question. – jmargolisvt Aug 28 '20 at 15:14
1

@jmargolisvt you nailed it! I'm going to modify this answer a little bit to include your comment. THANK YOU! – Ole Aug 28 '20 at 15:29

1 Answers1