CODEWITHSUNDEEP
htmlcss
user3520443
user3520443

Reputation: 279

Understanding CSS child selectors

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

Answers (2)

potashin
potashin

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)

Example

Upvotes: 0

Albzi
Albzi

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.

Reference

Taking what you know now, .navbar > .logo wouldn't work. It would have to be .navbar > .container > .logo or just .navbar .logo.

Upvotes: 5

Related Questions