CSS selectors combined behavior

Have you ever seen rules like that?
#home .row.boxes { ... }  // note that .row.boxes  2 classes are combined

Here is another example,

div.foo.bar[title^="Test"] { ... }

And when I played around with it, it is used for targeting an element that has "row" and "boxes" at the same time.

Let's using the same rule here:  #home .row.boxes { ... }

<div id="home">
    <div class="row boxes">This will pick up that css rules</div>
    <div class="boxes row">This will pick up that css rules</div>
    <div class="row">This will not pick up that css rules</div>
    <div class="boxes">This will not pick up that css rules</div>
</div>

You can think about this "combined" rules as "AND", in other words, the rule mentioned above says, only if "row" AND "boxes" are in the same element.

It is quite useful in some cases.  Think about the following case, without the combined rules, how can you only targeted the "bold" element?

<div class="boxes">
    <div class="row box">Hello World</div>
</div>
<div class="boxes">

    <div class="box">Hello World 2</div>

</div>

<div class="boxes">

    <div class="row">Hello World 3</div>

</div>