Incorrect formatting of classes?

[qjeabinay]

Hi! There were certain challenges in the CSS Flexbox category wherein the classes in the code look like this:

header .user-name{
       /* CSS stuff goes here */
}

I was wondering why there is a space between “header” and “.” ? And if you are creating a class called “.user-name” why was there a “header” tag mentioned before the class name? I am not sure if this was talked about in the tutorials?

[jonathankerr]

Hey great question. When there is a space like in the example you have given header .user-name{} This means that the styles are applied to everything with the class .user-name which is nested within a Header.

If there was no space for example header.user-name{} This would only apply the styles to a header which also has the class .user-name applied to it.

Hope this helps.

[qjeabinay]

@jonathankerr

This means that the styles are applied to everything with the class .user-name which is nested within a Header.

Hi. So if I were to use the .user-name {} class in other tags, it’s not going to work because this class only applies to tags within the header tag, right? Is there any good reason why we would want to exclusively use a class and make it applicable for tags located only within a header nest and not everywhere else? And thank you for the response earlier!

[Sylvant]

If you use only the class selector .user-name, styles will be applied to all elements entitled to that class. header .user-name is a selector compiled of 2 other selectors, it doesnt bind them together. You can still use only header to select the header element