Q: Trying to understand @media queries in CSS file In the process of trying to figure out how to stretch the navbar to fill the entire width of the screen I ran into something posted on here by another user. I am just starting out with bootstrap/css stuff. I was trying to figure out what was going on in this specific css file but couldn't for the life of me. I had a few questions if anyone can answer them. The CSS file contains this code:
@media (min-width: 640px) {
 /* 768px */
    .navbar {
        border-radius: 0px;
 /* 4px */
        ;
    }
}

@media (min-width: 640px) {
 /* 768px */
    .navbar-collapse {
        width: auto;
        border-top: 0;
        box-shadow: none;
    }

    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }

    .navbar-collapse.in {
        overflow-y: visible;
    }

    .navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 640px) {
 /* 768px */
    .navbar-nav {
        float: left;
        margin: 0;
    }

    .navbar-nav > li {
        float: left;
    }

    .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .navbar-nav.navbar-right:last-child {
        margin-right: -15px;
    }
}

@media (min-width: 640px) {
 /* 768px */
    .navbar-toggle {
        display: none;
    }
}

.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin-left: 0px;
 /* -15px */
    margin-right: 0px;
 /* -15px */
    ;
}

.container-fluid {
    padding-left: 0px;
 /* 15px */
    padding-right: 0px;
 /* 15px */
    ;
}

.nav > li > a {
    padding-left: 5px;
 /* 15px */
    padding-right: 5px;
 /* 15px */
    ;
}

.navbar {
    border: none;
 /* 1px solid transparent */
    margin-bottom: 0px;
 /* 20px */
    ;
}

.navbar-collapse {
    max-height: none;
 /* 340px; */
    padding-left: 0px;
 /* 15px */
    padding-right: 0px;
 /* 15px */
    ;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #fff;
 /* #e7e7e7 */
    ;
}

.navbar-default .navbar-nav > li > a {
    color: #fff;
 /* #777 */
    ;
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    background-color: #00752c;
 /* transparent */
    color: #fff;
 /* #333 */
    ;
}

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
    background-color: #00752c;
 /* #e7e7e7 */
    color: #fff;
 /* #555 */
    ;
}

.navbar-default .navbar-toggle:focus {
    background-color: transparent;
 /* #DDD */
    ;
}

.navbar-default .navbar-toggle:hover {
    background-color: #DDD;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #000;
 /* #888 */
    ;
}

.navbar-nav {
    margin: auto;
 /* 7.5px -15px */
    ;
}

.navbar-toggle {
    margin-left: 15px;
 /* 0px */
    margin-right: 0px;
 /* 15px */
    float: left;
 /* right */
    ;
}

body, html {
    height: 100%;
    width: 100%;
}

@media (max-width: 639px) {
    .navbar-collapse {
        border-bottom: 1px solid;
        border-top: 1px solid;
    }
}

.clear {
    clear: both;
}

.navbar {
    z-index: 1;
}

.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .active > a:focus {
    outline-style: none;
}

.navbar-nav {
    background-color: #009b3a;
}

#header nav {
    background-color: #009b3a;
    color: #fff;
    font-size: 13px;
    height: 50px;
    text-transform: uppercase;
}

#page {
    margin-left: auto;
    margin-right: auto;
    max-width: 620px;
}

My questions are:
1) Why are there 4 @media (min-width: 640px) queries? I tried combining those 4 into one @media query but it broke the code. I don't understand why.
2) What exactly is going on in something like this?
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse

3) In this CSS file, you have some things referenced multiple times in different
@media (min-width:640px) 

queries. For example:
You have
.navbar {
    border-radius: 0px; /* 4px */
}

At the start and again in a different @media 640px query
.navbar {
border: none; /* 1px solid transparent */
margin-bottom: 0px; /* 20px */
}

Why is it referenced twice here? Couldn't we just combine it into .navbar class? 
Help a noob understand CSS :)
Thanks

A: 1) You probably introduced some syntax errors when you merged them, especially if there is no indentation at all. Having 4 separate queries could just be a means of organizing code.
2) It's just 4 separate selectors that make use of the > selector which means immediate child/descendant. It will only search the children but not the children's children. More about it here.
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse

3) The lack of indentation has thwarted you. The first block of CSS is located within a query but the second block is not. I suggest adding some indentation so you can see for yourself.
In response to comment:
Given this HTML:
<div class = "foo">
    <div class = "bar">
        <div class = "bar"></div>
    </div>
    <div class = "bar">
        <div class = "bar"></div>
    </div>
</div>

.foo .bar will match every single .bar whereas .foo > .bar will only match the .bar  whose parent is .foo. It will not match the inner .bar because their parent is .bar.

A: *

*It depends where you put your media query. Notice that they appear after the style they are overriding. This is for clarity. Because CSS is evaluated from top to bottom, if the media is above the style - it will not be overridden. 

*
is direct child of parent. Without this css will look anywhere inside parent element 


*Examples you have shown are not conflicting - Second one is not inside media. If there was a conflict the latter one would override one higher in the file. I would say multiple media here are for readability
Hope that helps. Play with this one if you want to know more about how CSS classes are overridden http://josh.github.io/css-explain/

A: yes and you can combine all 4 media queries....they are included...because that is sloppy work? basically its a judgement call here: probably each was added at separate times, and they are meant to be minified @ some point. or that is in production and its not the best of style sheets. you can add them all into one media query, the border:none is going to override the entire border declaration(s), but border-radius is not included (asfaik, i don't see it on dev.moz in the short border style declaration. if it is and i'm wrong, the same applies, i would think, that everything property under the short form of border is reset to a style of none.
last question, the > is the child combinator selector, which only selects elements that are child descendants of the element(s)/classes/ids/, etc., named prior to the selector. so ul > li will only select list items that are direct descendants of unordered lists, where as ul li will select all list items that fall under an unordered list.

A: Some of your questions are difficult to answer without hearing form the developers themselves, but here are my best guesses:

1) Why are there 4 @media (min-width: 640px) queries?

The bootstrap css file isn't developed in css, but is the compiled result of many LESS files. These queries and css rules might have originally been split over several files, and this is just how the compiler has decided to squish it all together. 
As to why this didn't work when you tried it, that's hard to say without seeing your code, but as TreeTree suggested, you may have accidentally introduced syntax errors (maybe you missed a curly brace somewhere?). But you're right, all things being correct, these rules can be wrapped in a single @media query.

2) What exactly is going on in something like this?

.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse

The greater-than > symbol is a child selector. .container > .navbar-header means apply these rules to .navbar-header only when it is a direct child of .container

3) In this CSS file, you have some things referenced multiple times in different [@media] queries .. Why is it referenced twice here? 

Again, this may just be an artifact of the compiled LESS files into a single css file. If you were writing your css by hand, you are correct in thinking that they could be combined into a single rule. Our compilers aren't always that smart, but they probably don't need to be - these types of files usually aren't read by people, and the impact on performance is minimal, if any.

A: Thanks everyone. I definitely understand CSS a bit more now. I guess I just got unlucky with a case where the formatting made it hard to understand what was going on. That sort of thing certainly doesn't help when you're first starting out. 
