Class Names in CSS, Help me understand if I have this right?

I seem to get a different output with these two CSS specifiers… Any Ideas?

So as you can see below, when I put a space between the - .nav & .navbar-nav li a -

classes, It doesn’t work with the color I specified for that one, yet if I join them like this - .nav.navbar-nav li a -

.nav.navbar-nav li a {

color: darksalmon;

}

Yet for the one below, if I USE a space between the classes, it DOES work, as it should

.navbar-header .navbar-brand {

color: darksalmon;

}

Are they joined my no space because they’re classes from the same line, cause that’s all I’ve been able to deduce from studying the document… It seems only when they are from separate class creations do they get the space

You haven’t shared your HTML so it’s hard to tell, but yes, there is a big difference whether or not you use a space between classes. By using specifiers without spaces, e.g. .class1.class2 it is looking for elements which contain both class1 and class2, like

<div class="class1 class2">
...
</div>

When separated by spaces, e.g. .class1 .class2 it looks for children. In this case something like

<div class="class1">
    <div class="class2"></div>
</div>

Note that for the second one, the child class doesn’t have to be the direct child. There can be multiple layers between class1 and class2. There are specific selectors for direct children, siblings, etc. that you can look up when needed.

2 Likes

Thank you for your response, it clarified the whole situation for me. :grinning:

1 Like