Reputation: 279
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.
Upvotes: 0
Views: 66
Reputation: 44611
Use
.navbar > .container > .logo
or
.navbar .logo
Your mistakes:
in your case you should use class selector .logo
instead of element logo
.logo
is not a child of .navbar
, it is a descendant, so you should use one of the examples above (using descendant parenthesis or child parenthesis through .container
element)
Upvotes: 0
Reputation: 15619
.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
The difference between:
.navbar .logo
.navbar > .logo
The first selector above is a decendant selector. It will select any list items that are anywhere underneath an unordered list in the markup structure. The list item could be buried three levels deep within other nested lists, and this selector will still match it. The second selector above is a child combinator selector. This means it will only select list items that are direct children of an unordered list. In otherwords, it only looks one level down the markup structure, no deeper. So if there was another unordered list nested deeper, the list item children of it will not be targeted by this selector.
Taking what you know now, .navbar > .logo
wouldn't work. It would have to be .navbar > .container > .logo
or just .navbar .logo
.
Upvotes: 5