Understanding CSS child selectors

Vote count:

0

I am after some knowledge (Which I have looked up the documentation and still cannot wrap my head around it). I have put together some simple css to get an idea of what it is supposed to do or behave?

<div class="navbar">
    <div class="container">
        <div class="logo">
            Yes
        </div>        
    </div>
</div>

So, I have put together some very simple html with some very simple css.

body{
    margin:0;
}

.container{
    margin: 0 auto;
    width: 960px;
    background-color: red;  
}

.navbar{
    background-color: #E3E3E3;
    border-bottom: 1px solid #A0A0A0;
    color: #000;
    padding: 10px 0 10px 0;
}

.navbar > logo{
    float: left;
    margin-left: 100px;
}

So what I am trying to understand or achieve to understand is what (if anything) is .navbar > logo doing? What I want it to do is change style of some kind. I am just trying to wrap my head around this as I wan to advance my CSS knowledge.

Here is a fiddle: JSFIDDLE

Please note this isn't for anything specific or project wise so I am not asking for somebody to help me I just want some simple explanation as to how to use these correctly.

asked 2 mins ago

user3520443

94

1 Answer

Vote count:

2

.navbar > logo 

isn't doing anything because you don't have a <logo> element.

Because logo is a class, it should be .logo:

.navbar > .logo

answered 1 min ago

BeatAlex

7,346