What's the difference between CSS child selector without space "a>b" and with space "a > b"?

Question

Is there any difference between both of them?

Example 1:

a>b{
  display: block;
}

Example 2:

a > b{
  display: block;
}

The difference is the latter requires you to type 2 more characters (*No differerence*) — Trash Can, Nov 02 '17 at 05:40
There is no difference when it comes to applying the CSS property. Are you facing any issue with that ? — All about JS, Nov 02 '17 at 05:50

score 3 · Accepted Answer · answered Nov 02 '17 at 08:31

CSS is very forgiving. The CSS selectors specification mentiones that whitespaces around combinators (like your > here) are optional:

The following selector represents a p element that is child of body:
body > p
The following example combines descendant combinators and child combinators.
div ol>li p
It represents a p element that is a descendant of an li element; the li element must be the child of an ol element; the ol element must be a descendant of a div. Notice that the optional white space around the ">" combinator has been left out.

— Section 8.2 of the CSS Selectors Level 3 recommendation

To further back this up, the specification's Grammar section makes this really apparent with an implementation approach:

combinator
  /* combinators can be surrounded by whitespace */
  : S+ | S* [ '>' | '+' | '~' | COLUMN | '/' IDENT '/' ] S*
  ;
— Section 10 of the CSS Selectors Level 3 recommendation

For this reason, the following are all valid as CSS parsers should simply strip the spaces out:

a>b {}
a > b {}
a> b {}
a >b {}
a     >    b {}

So to answer your question: no, there is no difference.

As for which one you should use, however: that's purely a question of personal preference. For me, I'd opt for a > b, simply because I feel it makes it easier to read, but if you want to type a>b or even a > b it's entirely up to you - although anyone who has to read your code will probably not be your number 1 fan with the latter approach!

See also: https://stackoverflow.com/questions/23581885/css-vs https://stackoverflow.com/questions/39091583/whitespace-in-css-selectors (and, albeit not related to combinators, https://stackoverflow.com/questions/5930898/what-are-the-rules-around-whitespace-in-attribute-selectors). — BoltClock, Nov 02 '17 at 17:56

score 2 · Answer 2 · answered Nov 02 '17 at 05:40

There is no such difference. See the snippet below for demo:

.a>.b{
  color: red;
}

.c > .d{
  color: red;
}

<div class="a">
  Class a
  <div class="b">
    Class b
  </div>
</div>

<div class="c">
  Class c
  <div class="d">
    Class d
  </div>
</div>

Hanif · Answer 3 · 2017-11-02T05:42:53.913

0

First of all there is no effect space between or not, both will work.

Example will work with following DOM structure:

<a><b></b></a>

edited Nov 02 '17 at 05:42

answered Nov 02 '17 at 05:40

Hanif

3,739
1
12
18

What? there is such a thing to select a parent in CSS? Mind blown – Trash Can Nov 02 '17 at 05:42

score 0 · Answer 4 · answered Nov 02 '17 at 05:41

0

There is no difference between the two.

answered Nov 02 '17 at 05:41

DavSev

1,005
4
22
47

You may wanna explain a little bit further why this is not the case. I.e. reference a documentation. – Xyz Nov 02 '17 at 10:54

What's the difference between CSS child selector without space "a>b" and with space "a > b"?

4 Answers4