Using CSS selectors and combinators (*, ~, >, <, +)

Question

I am working with CSS selector symbols to create complex element selectors. I am currently stuck with selector symbols which I cannot create combinations with.

For instance, I am trying to create: body and children elements of body that are not of #foo id using

body > *:not(#main-div) + body

but the combinations of the elements don't work. I have used each of the selectors individually at least once before, but never tried their combinations. This feature seemed very useful to me and so I wanted to know whether it is possible to create combinations of these selector symbols. If yes, what is the correct syntax to follow?

+ should be ,

D. Pardal
– D. Pardal

2020-06-04 19:26:09 +00:00
Commented Jun 4, 2020 at 19:26 — D. Pardal
– D. Pardal, Commented Jun 4, 2020 at 19:26
body, body > *:not(#main-div)

Sean
– Sean

2020-06-04 19:27:08 +00:00
Commented Jun 4, 2020 at 19:27 — Sean
– Sean, Commented Jun 4, 2020 at 19:27

Sean · Accepted Answer · 2020-06-04 19:39:21Z

2

In order to apply styles to both the body and all immediate children of the body (excluding the #main-div) element, you should use the following selector list:

body,
body > *:not(#main-div) {
  ...
}

Commas should be used to group selectors into selector lists. The + is an adjacent sibling combinator.

The Mozilla Developer Docs has a great primer on forming CSS selectors and rulesets here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors

answered Jun 4, 2020 at 19:39

Sean

8,3875 gold badges30 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Elysian Storm Over a year ago

Thanks for the documentation. It was genuinely what I was looking for.

score 0 · Accepted Answer · 2020-06-04 19:43:51Z

0

This feature seemed very useful to me and so I wanted to know whether it is possible to create combinations of these selector symbols. If yes, what is the correct syntax to follow?

Yes it is possible but i think the syntax you are using is incorrect instead you must use

body > :not(#main-div),body

And according to me there's no use of * and + because by even not mentioning * it will exclude all the id's that are #main-div and + is only used when the element is right after the current element.

edited Jun 4, 2020 at 19:43

answered Jun 4, 2020 at 19:30

user13682461

6 Comments

Elysian Storm Over a year ago

This applies the selector to only children of body and not body also. Also, the question is not answered sufficiently. If you could elaborate your answer as to how to use these features, it would be more insightful. Your answer solves an example, not the question asked. I hope this comment helps you improve your answer.

user13682461 Over a year ago

Yes sure i'll do it.

user13682461 Over a year ago

Check out my edited answer now it will consider body itself too in the css

user13682461 Over a year ago

I'm sorry as i can't enter the other comment section i just want to tell you that yes it is true that css is excuted from left to right .

user13682461 Over a year ago

No actually here it remains only till comma , where specified ,it cannot and will never inherit the properties seperated by commas.

|

Collectives™ on Stack Overflow

Using CSS selectors and combinators (*, ~, >, <, +)

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related