CSS ">" vs " > "?

Question

In CSS .a > .b is the same as .a>.b, but which of this two is the more correct notation? I see that in Chrome developer tools the 2nd variant is used

Answer 1

Neither is "more correct"; both are equally valid. The only thing that the spec says is that whitespace surrounding combinators is optional (emphasis mine):

Combinators are: whitespace, "greater-than sign" (U+003E, >), "plus sign" (U+002B, +) and "tilde" (U+007E, ~). White space may appear between a combinator and the simple selectors around it. Only the characters "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form feed" (U+000C) can occur in whitespace. Other space-like characters, such as "em-space" (U+2003) and "ideographic space" (U+3000), are never part of whitespace.

Note that the descendant combinator itself is represented by a space character; if the only characters surrounding two compound selectors are whitespace characters then they are treated as a descendant combinator. In your example, the child combinator > can either be surrounded by whitespace, or not; there is no difference.

You can see an example of both whitespace and whitespace-less syntaxes in the spec itself, coincidentally also in the section describing the child combinator >. Notice, again with emphasis mine, that the spec even mentions explicitly where whitespace has been omitted, to demonstrate that it is in fact completely optional:

Examples:

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.

As mentioned by others, when writing CSS, whitespace is good to have for readability purposes; if file size is a concern, consider minifying and/or compressing your stylesheet during post-production (minifying typically strips non-significant whitespace out for you, which can include whitespace around combinators). The only reason you would choose not to use whitespace when authoring CSS is a matter of coding style, and that is still technically valid, even if frowned upon.

Answer 2

The first is preferred for readability but it is not necessary, the compiler does not care besides the fact that it has less characters to read in the second one.

I can assure you that all humans prefer the first version because it makes our jobs a lot easier while computers prefer the second, but only slightly. I'd recommend only using the second option if you minify your CSS only when deploying to a live site as doing so will save time for all the developers working with it